CSS的居中

CSS的居中有很多种方法，比较常见简单的有以下几种：

1.水平居中

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

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

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

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

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

不确定宽度的块级元素有三种方式可实现居中。

• 将块级元素包含在table标签内，对table设置margin-left：auto和margin-right：auto就可以使table水平居中，间接使块级元素实现水平居中。
• 改变块级元素的display为inline类型，然后用text-align：center来实现居中。
• 通过给父元素设置float，然后父元素设置position：relative和left：50%，子元素设置position：relative和left：-50%来实现水平居中。

2.竖直居中

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

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

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

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

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

• 把元素放入表格中，表格的td 标签默认情况下就隐式的设置了vertical-align的值为middle，从而实现竖直居中。
• 对支持display：table-cell的IE8和Firefox用 display：table-cell 和 vertical-align：middle来实现居中。对不支持display：table-cell的IE6和IE7，通过给父子两层元素分别设置position：absolute；top：50%和position：relative；top：-50%来实现居中。