css居中方法小结

水平居中

行内元素

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

块状元素

当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

定宽块状元素：块状元素的宽度width为固定值。

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)

不定宽块状元素：块状元素的宽度width不固定。

设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的。

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。 

.container{
    float:left;
    position:relative;
    left:50%
}

 

.container ul{
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:-50%;
}

.container li{
    float:left;
    display:inline;
    margin-right:8px;
}

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

垂直居中

父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。

父元素高度确定的多行文本

给父元素设置line-height等于高度值，font-size设置为0，对多行文本添加一个div父元素，改元素设置display：inline-block；vertical-align：middle；并且重新设置font-size和line-height，因为这两个属性会继承父元素的值。

.out {
    border:1px solid red;
    line-height: 200px;
    height:200px;
    font-size:0;
    text-align: center;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    font-size:14px;
    line-height: 20px;
}

<div class="out">
    <div class="inner">
        <p>111</p>
        <p>222</p>
    </div>
</div>

 css3的flex布局，使得居中问题变得更简单了，随着对flex布局的熟悉和了解，后续会不断完善这一部分内容。