标签：

程度垂直居中的几种要领 程度居中

1、如果是行内元素，只需在父元素设置 text-align: center; 即可。

2、块级元素，只需设置 margin: 0 auto; 即可。
如下元素布局：

<div id="wrap"> <div id="box">hello world</div> </div>

3、absolute + magin
定位位置为 left: 50%; 然后 margin-left: -50px; 向左偏移元素宽度的一半。
错误谬误：要知道元素的宽度

#wrap{ position: relative; } #box{ width: 100px; position: absolute; left: 50%; margin-left: -50px; }

4、absolute + translate
跟上面要领差不久不多，用 transform: translateX(-50%); 取代 margin-left，这样就不需要知道元素的宽度了。
错误谬误：transform 的兼容性（ie10）

#wrap{ position: relative; } #box{ width: 100px; position: absolute; left: 50%; transform: translateX(-50%); }

5、absolute + margin auto
元素定位 left: 0; right: 0; margin: 0 auto; 即可。

#wrap{ position: relative; } #box{ width: 100px; position: absolute; left: 0; right: 0; margin: 0 auto; }

6、flex
弹性构造什么的最喜欢了。
错误谬误：flex 兼容性（ie11）

#wrap{ display: flex; justify-content: center; } 垂直居中

垂直居中跟程度居中有很多相似的要领。

1、如果是单行文本，设置 line-height 即可。

2、absolute + magin
定位位置为 top: 50%; 然后 margin-top: -50px; 向上偏移元素高度的一半。
错误谬误：要知道元素的高度

#wrap{ position: relative; } #box{ height: 100px; position: absolute; top: 50%; margin-top: -50px; }

3、absolute + translate
跟上面要领差不久不多，，用 transform: translateY(-50%); 取代 margin-top，这样就不需要知道元素的高度了。
错误谬误：transform 的兼容性（ie10）

#wrap{ position: relative; } #box{ height: 100px; position: absolute; top: 50%; transform: translateY(-50%); }

4、absolute + margin auto
元素定位 top: 0; bottom: 0; margin: auto 0; 即可。

#wrap{ position: relative; } #box{ height: 100px; position: absolute; top: 0; bottom: 0; margin: auto 0; }

5、display: table-cell
在父元素设置 display: table-cell; 将普通元素酿成 table 元素，再设置 vertical-align: middle; 垂直居中。

#wrap{ display: table-cell; vertical-align: middle; }

6、flex
错误谬误：flex 兼容性（ie11）

#wrap{ display: flex; align-items: center; }