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%);属性。
记取:若是你想要同时完成水准居中,那末你或者用实现垂直居中的同样的本领来完成。
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/shili/s52943.shtml