用绝对定位实现垂直居中

用绝对定位实现垂直居中

• 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%);属性。

转载于:https://www.cnblogs.com/jjxhp/p/10982575.html