JS:
外层DIV的宽度/2-内层DIV的宽度/2的值就是内层DIV的TOP值
css:
<style>
*{margin:0px;padding:0px}
.wrap{
width:600px;
height:500px;
background:deeppink;
+position:relative;/*作为parent的定位父级*/
display:table;
}
.parent{
display:table-cell;
vertical-align:middle;
+position:absolute;/*对parent定位让他存在在wrap高度的50%位置,内容由child撑开*/
+top:50%;
/*+border:1px solid yellow*/
}
/*子级会继承父级的absolute属性,也就是如果存在在wrap50%的位置,
* 而现在他相对与自身向上移动50%;就达到了垂直居中的目的*/
.child{
background:aquamarine;
+position:relative;
+top:-50%;
}
img{vertical-align:middle;}/*消除几px的空隙*/
</style>
垂直居中还有很多方式,关注一下妙味课堂吧,都有讲。
