.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; }
效果如下：
