水平居中
margin:0 auto;
解读
上面的代码值设置了两个值，那么第一个值就是元素的上下边距，第二个值就是左右边距。当元素的定义了width属性时，auto能实现水平居中的效果。这是固定写法。
垂直居中(小编之弱点)
例一
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script></script><style>.wrapper{width: 300px;height: 300px;background-color: pink;text-align:center;}.box{width: 100px;height: 100px;background-color: deepskyblue;vertical-align: middle;display: inline-block;}.boxhelp{width: 0px;height: 100%;display: inline-block;vertical-align: middle;}</style></head><body><div class="wrapper"><div class="box"></div><div class="boxhelp"></div></div></body></html>
分析:
display:inline-block;//结合了inline与block的一些特点,就是不独占一行的块级元素.,所以父块级元素可以使用:行级元素的居中样式:text-align:center.
如果要居中的块级元素只有一个，需做一个辅助div，设置100%的高度并vertical-align: middle;这样就可以达到垂直居中的效果。
例二
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script></script><style>#parent {height: 250px;background-color:pink}#child {height: 100px;line-height:250px;}</style></head><body><div id="parent"><div id="floater"></div><div id="child">Content here</div></div></body></html>
解说:
记住垂直居中，我们的万能王:lighe-height.
对此属性不熟悉的可见。
CSS line-height 属性
