需求點

固定定位div中添加圖片內容，保證圖片垂直居中，并且自適應。
一般在第三方UI組件中，這種布局需求較為常見

解決方案一 （親測有效）

HTML代碼：

<div class="el-carousel__item is-active is-animating"><img src="/static/img/login-bg3.51c5580.png" alt=""> </div>

CSS代碼：

.el-carousel__item {position: absolute;width: 100%;height: 100%;top: 0;left: 0;display: inline-block;overflow: hidden;z-index: 0; } /* 這是圖片正常居中的常規寫法 */ img {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: 81.7%; }

img的樣式中，它的寬度由設計稿的定寬與圖片寬度的比例決定的。

• 溫馨提示：

• 寬度撐不開問題：可以在img的外層div 添加width:100%; padding: 0 50% 解決撐不開父類div的問題。
• 高度占不滿屏幕問題：保證當前div的高度是從最外層div的高度一層一層繼承下來，如果沒有，就需要在其父級添加height: 100%或者height: inherit。

總結

以上是生活随笔為你收集整理的绝对定位的div图片居中自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。