水平居中

行內元素

如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 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布局的熟悉和了解，後續會不斷完善這一部分內容。

css居中方法小結