本篇文章接上篇介绍块元素的居中。

1、利用margin: 0 auto实现块元素居中。

2、相对于浏览器视口的居中（垂直居中和水平居中）代码如下：

已知元素宽高：

<div style="width: 200px;height:200px; position: fixed;top:50%;left:50%;margin-left: -100px/*宽的一半*/;margin-top: -100px/*高的一半*/;z-index:999;">123</div>

未知元素宽高：

<div style="position: fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999;">123</div>

3、相对于父元素的居中（垂直居中和水平居中）需父元素设置属性position: relative实现方法有3种代码如下：

<div class="top" style="position:relative;"><div style="width: 200px;height:200px; position: absolute;top:50%;left:50%;margin-left: -100px/*宽的一半*/;margin-top: -100px/*高的一半*/;z-index:999;">123</div></div>

<div class="top" style="position:relative;"><div style="width: 200px;height:200px; position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999;">123</div></div>

<div class="top" style="position:relative;"><div style="width: 200px;height:200px; position: absolute;top:0;left:0;bottom:0;right:0;margin:auto;z-index:999;">123</div></div>

4、利用flex布局实现居中

<div class="content" style="display:flex;justify-content:center;align-items:center;"><div class="son">123</div></div>