CSS居中之美（二）——水平居中

如何实现元素的水平居中

1、使用margin来实现水平居中

html

<div class="horizontal">content</div>

CSS

.horizontal {
            width: 200px;
            margin: 0 auto;
}

使用上面方法实现元素水平居中一定要让元素满足两个条件：其一，元素需要有一个固定宽度值；其二元素的margin-left和margin-right都必须设置为auto，这两个条件少了任何一个都无法让元素达到水平居中的效果。

2、使用绝对定位实现水平居中

实现固定宽度的水平居中，我们还可以使用绝对定位配合负的margin来实现，具体代码如下：
Html

<div class="horizontal">content</div>

CSS

.horizontal {
    width: 960px;
    position: absolute;
    left: 50%;
    margin-left: -480px;/*此值等于“-width/2”*/
}

3、单行文本的水平居中

这种方法主要是针对单行文本居中或者前面介绍的table格式居，主要运用的是text-align:center让元素水平居中：

.testH{text-align:center;}

4、图片的水平居中

我们前面说了图片的垂直居中，那么他的水平居中呢：
Html

<div class="horizontal">
    <p>nihao</p>
    <img src="blog1.png" alt="">
</div>

CSS

.horizontal {
    text-align: center;     /*记住是让他们的父元素使用text-align属性*/
}

我们来看一下结果：