1.垂直居中

1.高度固定 单行文本

思路：使用line-height = height。

html：

<!--父元素高度确定,单行文本--> <div class="wrap"> <div class="num">你好呀</div> </div>

css：

*{ margin: 0; padding: 0; } .wrap{ background-color: violet; width: 300px; height: 300px; } .num{ height: 300px; width: 300px; line-height: 300px; }

运行结果：

2.高度固定 多行文本

思路：父类display:table。子类display:table和vertical-align:middle。

html：

<!--父元素高度确定,多行文本--> <div class="wrap"> <div class="num">你好呀收费公司我还是任何人jet进入太空vy</div> </div>

css：

*{ margin: 0; padding: 0; } .wrap{ background-color: violet; width: 300px; height: 300px; display:table; } .num{ display: table-cell; height: 300px; width: 300px; vertical-align: middle; }

运行结果：

兼容性：除了IE6,IE7都支持

3.高度未知

（1）方法1

思路：使用position:absolute设置top，left，margin-left和margin-top即可。

这也是我最常用的方法。哈哈

html：

<!--父元素高度不确定--> <div class="wrap"></div>

css：

*{ margin: 0; padding: 0; } .wrap{ position: absolute; background-color: violet; width: 300px; height: 300px; top: 50%; margin-top: -150px; }

运行结果：

这种方法基本浏览器都能够兼容，不足之处就是需要固定宽高。

这里的margin-top：-150px也可以改为css3的transform：translateY：-50%

（2）方法2

思路：使用flex

注意了：目前支持的浏览器仅：IE10+,Firefox2+,Chrome4+,Safari3。 看到IE10 ，感觉这家伙用不上了。

html:

<!--父元素高度不确定--> <div class="wrap"> <div class="inner">biubiubiu</div> </div>

css:

*{ margin: 0; padding: 0; } .wrap{ background-color: violet; width: 300px;//宽高可以不设 height: 300px;//宽高可以不设 display: flex; display: -webkit-flex; justify-content: center; align-items: center;//这句还实现了水平居中 } .inner{ }

运行结果：

还要考虑各种兼容性的问题。目前不适用呀。

4.当被居中的元素是inline或inline-block时

父元素display:table-cell 和vertical-align:middle

html:

<!--inline-block--> <div class="wrap"> <div class="num">biubiubiu</div> </div>

css:

*{ margin: 0; padding: 0; } .wrap{ background-color: violet; width: 300px; height: 300px; display:table-cell; vertical-align: middle; } .num{ display: inline-block; }

运行结果：

1.水平居中

1.行内元素水平居中

text-align:center;

2.块状元素水平居中

margin:0 auto;

3.多块状元素水平居中

思路：display：inline

html:

<div class="b"> <div class="wrap"></div> <div class="wrap"></div> <div class="wrap"></div> <div class="wrap"></div> <div class="wrap"></div> <div class="wrap"></div> </div>

css:

*{ margin: 0; padding: 0; } .b{ text-align: center; font-size: 0; } .wrap{ width: 100px; height: 100px; display:inline-block; border:solid 1px black; }

运行结果：

父元素设置font-size：0；可以使inline-block元素之间间隙为0 父元素设置text-align：center可以使iinline-block居中