用絕對定位實現垂直居中

• HTML代碼：

<div class="posdiv">
<img src="1.jpg" alt="">
</div>

• CSS代碼：

body{background: #ccc;}
.posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto}
.posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;}

• 解釋：

1. 一張包裹在div中的img圖片，我們給不光給圖片以及div元素定義了尺寸，還給div元素定義了#fff的背景色(背景顏色可以根據需求設置)。
2. 給img的父元素添加相對定位屬性（position: relative），同時，要給子元素也就是圖片img元素添加絕對定位屬性（position: absolute）。
3. 將圖片元素的top屬性設置為50%。
4. 現在我們需要給img元素設置一個負的margin-top值，這個值為你想要實現垂直居中的元素高度的一半。
5. 如果不確定元素的高度，可以不使用margin-top，而是使用transform:translateY(-50%);屬性。