需求點
固定定位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。
)
