web中怎么用绝对定位实现垂直居中

这篇文章主要介绍了web中怎么用绝对定位实现垂直居中，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

HTML代码：

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

CSS代码：

body{bac千克round: #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值，这个值为你想要实现垂直居中的元素高度的一半，*假如不注定元素的高度，也许不运用margin-top，而是应用transform:translateY(-50%);属性。
记取：若是你想要同时完成水准居中，那末你或者用实现垂直居中的同样的本领来完成。

感谢你能够认真阅读完这篇文章，希望小编分享的“web中怎么用绝对定位实现垂直居中”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!