.parent { position:relative; width:100%; height:200px; background:red; } p { position:absolute; top:50%; left:50%; } .hidden-img { visibility:hidden; } .show-img { position:absolute; right:50%; bottom:50%; }
结果如下：
transform居中
上面讲到的div居中的例子中，div的宽度都是牢靠的，然而实际项目中，有大概碰着不定宽的div，出格是响应式可能移动端的设计中，越发常见。所以下面先容一种不需要定宽的div程度垂直居中要领。
先上代码：
复制代码 代码如下:
<div>
<div>
<div>我是程度垂直居中噢！</div>
</div>
</div>
.parent { float: left; width: 100%; height: 200px; background-color: red; } .children { float:left; position:relative; top:50%; left:50%; } .children-inline { position: relative; left: -50%; -webkit-transform : translate3d(0, -50%, 0); transform : translate3d(0, -50%, 0); background-color: black; color:white; }
结果如下：
首先我们操作float，将需要居中的div的父div也就是children的宽度收缩，然后left:50%,将children的左边与程度中线对齐。这个时候，还没有真正居中，我们需要将children-inner左移动-50%，这样就程度居中了。
再来说说垂直偏向，先将children的top设为50%，然后其上边和垂直中线对齐了，同样，我们需要将children-inner上移动-50%。可是这个50%是计较不出来的，所以我们用到了transform : translate3d(0, -50%, 0);
这个要领很是好用噢。
flex居中
最厥后先容一下CSS3中的display:flex来实现的程度垂直居中的要领。
复制代码 代码如下:
<div>
<div>我是通过flex的程度垂直居中噢！</div>
</div>
html,body{ width: 100%; height: 200px; } .parent { display:flex; align-items: center;/*垂直居中*/ justify-content: center;/*程度居中*/ width:100%; height:100%; background-color:red; } .children { background-color:blue; }
结果如下：
