CSS居中的方法总结

【水平居中】

行内：text-align:center;

定宽块状：1.left:0 right:0然后用margin: auto外边距填充，水平方向不会发生外边距叠加;  2.绝对定位（父元素定位不能是普通流）

不定宽块状：

1.<table> <tbody><tr><td>，然后table即是定宽块状元素

2.display:inline-block 然后当做行内元素处理，可以实现居中且保留块元素特性，如设置宽高。

 

【垂直居中（假设父元素高度不定）】

定位选择：普通流、float不能在垂直方向被定位，故只考虑absolute和relative，但relative定位没有脱离文档流，会造成顶底与父元素的margin合并。因此一般非文本元素的垂直居中都用absolute定位。

居中思路有两种:

一、先将待定位元素坐标定位到相应位置，再配合负边距调整（需要用到自身高度，或用CSS3的transform:translateY(-50%)）；

二、利用自动填充来“撑”到居中，这一思路的做法包括margin（父元素不能为普通流定位，否则不以父元素为坐标基准）和line-height（文本元素）。