CSS居中的不同情况使用不同的方法

    内容提要：CSS居中的不同情况使用不同的方法，CSS的居中会遇到很多种情况，不同的情况使用的方法不同。 1、水平居中，（1）文本、图片等行内元素的水平居中...

　　CSS的居中会遇到很多种情况，不同的情况使用的方法不同。

　　1、水平居中

　　（1）文本、图片等行内元素的水平居中

　　给父元素设置text-align：center可以实现文本、图片等行内元素的水平居中。

　　（2）确定宽度的块级元素的水平居中

　　确定宽度的块级元素水平居中是通过设置margin-left：auto和margin-right：auto来实现的。

　　（3）不确定宽度的块级元素的水平居中

　　不确定宽度的块级元素有三种方式可以实现居中。以分页模块为例，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。

　　2、竖直居中

　　（1）父元素高度不确定的文本、图片、块级元素的竖直居中

　　父元素高度不确定的文本、图片、块级元素的竖直居中是通过父容器设置相同上下边距实现的。

　　（2）父元素高度确定的单行文本的竖直居中

　　父元素高度确定的单行文本的竖直居中，是通过给父元素设置line-height来实现的，line-height值和父元素的高度值相同。

　　（3）父元素高度确定的多行文本、图片、块级元素的竖直居中
     
　　父元素高度确定的多行文本、图片、块级元素的竖直居中有两种方法。

　　方法一：说到竖直居中，CSS中有一个用于竖直居中的属性vertical-align，但只有当父元素为td或者th时，这个vertical-align属性才会生效，对于其他块级元素，例如div、p等，默认情况下是不支持vertical-align属性的。在Firefox和IE 8下，可以设置块级元素的display类型为table-cell，激活vertical-align属性，但IE 6和IE 7并不支持display：table-cell，所以这种方法没办法跨浏览器兼容。但我们可以使用最原始的笨方法来实现兼容——既然不支持块级元素设置为display：table-cell来模拟表格，那么，我们就直接使用表格好了。

　　方法一可以很好地实现竖直效果居中，且不会带来任何样式上的副作用，但它添加了无语义的标签，并增加了嵌套深度。

　　方法二：对支持display：table-cell的IE 8和Firefox用display：table-cell和vertical-align来实现居中，对不支持display：table-cell的IE 6和IE 7，使用特定格式的hack。

　　方法二利用hack技术区别对待Firefox、IE 8和IE 6、IE 7，在不支持display：table-cell的IE 6和IE 7下，通过给父子两层元素分别设置top：50%和top：-50%来实现居中。这种方法的好处是没有增加额外的标签，但它的缺点也很明显，一方面它使用了hack，不利于维护、另一方面，它需要设置position：relative和position：absolute，带来了副作用。

『 网页设计 | DIV+CSS 』