CSS實現居中的方式

在介紹居中方式之前，簡單介紹一下行內元素和塊級元素。

行內元素

• 和其他元素都在同一行
• 高，行高及外邊距和內邊距部分可以改變
• 寬度只與內容有關
• 行內元素只能容納文本或者其他行內元素
• 常用內聯元素：a,img,input,lable,select,span,textarea,font

塊級元素

• 總是在新行上開始，占據一整行
• 高度，行高以及外邊距和內邊距都可控制
• 寬度始終與瀏覽器的寬度一樣，與內容無關
• 可以容納行內元素和其他塊級元素
• 常用的塊級元素：div,p,table,form,h1,h2,h3,h4,h5,h6,dl,ol,ul,li

居中方式分為三種：水平居中，垂直居中，水平垂直居中。

1、水平居中

1.1、行內元素水平居中

利用text-align: center可以實現在塊級元素內部的行內元素水平居中。
此方法對行內元素(inline)，行內塊(inline-block)，行內表(inline-table)，inline-flex元素水平居中都有效。

<div class="center-text">
    簡單是穩定的前提。
</div>

div {
    height:60px;
    border: 2px dashed #f69c55;
}
.center-text {
    text-align: center;
}

1.2、塊級元素水平居中

通過把固定寬度的塊級元素的margin-left和margin-right設成auto，就可以使塊級元素水平居中。

<div>
    <p class="center-block">
        簡單不先於復雜，而是在復雜之后。
    </p>
</div>

div {
    height:100px;
    border: 2px dashed #f69c55;
}
.center-block {
    margin: 0 auto;
    width: 8rem;
    padding:1rem;
    color:#fff;
    background:#000;
}

1.3、多塊級元素水平居中

利用inline-block

如果一行中有兩個或兩個以上的塊級元素，通過設置塊級元素的顯示類型為inline-block和父容器的text-align屬性從而使多塊級元素水平居中。

<div class="container">
    <div class="inline-block">
        簡單不先於復雜
    </div>
    <div class="inline-block">
        而是在復雜之后
    </div>
    <div class="inline-block">
        簡單不先於復雜，而是在復雜之后。
    </div>
</div>

.container {
    height:100px;
    padding: 8px;
    text-align: center;
    border: 2px dashed #f69c55;
}
.inline-block {
    padding: 8px;
    width: 4rem;
    margin: 0 8px;
    color: #fff;
    background: #000;
    display: inline-block;
}
.container >div:first-child {
    height: 45px;
}
.container >div:nth-of-type(2) {
    height: 45px;
}

利用displa: flex

利用彈性布局(flex)，實現水平居中，其中justify-content用於設置彈性盒子元素在主軸(橫向)方向上的對齊方式。

<div class="flex-center">
    <div>
        簡單不先於復雜。
    </div>
    <div>
        簡單不先於復雜，而是在復雜之后。
    </div>
    <div>
        而是在復雜之后。
    </div>
</div>

.flex-center {
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items:flex-end;
    border: 2px dashed #f69c55;
}
.flex-center >div {
    padding: 8px;
    width: 4rem;
    margin: 0 8px;
    color: #fff;
    background: #000;
}
.flex-center >div:first-child {
    height: 45px;
}
.flex-center >div:last-child {
    height: 45px;
}

• flex-direction 決定主軸的方向(即項目的排列方向)
• flex-wrap 如果一條軸線排列不下，如何換行
• justify-content 定義了項目在主軸上的對齊方式
• align-items 定義項目在交叉軸上如何對齊

Flex布局教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

2、垂直居中

2.1、單行行內元素垂直居中

通過設置內聯元素的高度(height)和行高(line-height)相等，從而使元素垂直居中。

<div id="box">
    軟件在能夠復用前必須先能用。
</div>

#box {
    height: 120px;
    line-height: 120px;
    border: 2px dashed #f69c55;
}

2.2、多行元素垂直居中

利用表格布局

利用表布局的vertical-align: middle可以實現子元素的垂直居中 。

<div class="center-table">
    <p class="v-cell">
        The more technology you learn,<br>
        the more you realize how little you know.
    </p>
</div>

.center-table {
    display: table;
    height: 140px;
    border: 2px dashed #f69c55;
}
.v-cell {
    display: table-cell;
    vertical-align: middle;
}

利用flex布局

利用flex布局實現垂直居中，其中flex-direction: column定義主軸方向為縱向。flex是在CSS3中定義，在較老的瀏覽器中存在兼容問題。

<div class="center-flex">
    <p>
        Dance like nobody is watching,<br>
        code like everybody is.
    </p>
</div>

.center-flex {
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px dashed #f69c55;
}

2.3、塊級元素垂直居中

固定高度的塊級元素

已知居中元素的高度和寬度，垂直居中問題就很簡單。通過絕對定位元素距離頂部50%，並設置margin-top向上偏移元素高度的一半，就可實現垂直居中。

<div class="parent">
    <div class="child">控制復雜性是計算機編程的本質。</div>
</div>

.parent {
    height: 140px;
    position: relative;
    border: 2px dashed #f69c55;
}
.child {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px;
    color:#fff;
    background: #000;
}

未知高度的塊級元素

當垂直居中的塊級元素高度未知時，可以借助CSS3中的transform屬性向Y軸反向偏移50%的方法實現垂直居中，部分瀏覽器可能存在兼容性問題。

<div class="parent">
    <div class="child">世界上有 10 種人，懂二進制的和不懂二進制的。</div>
</div>

.parent {
    height: 140px;
    position: relative;
    border: 2px dashed #f69c55;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: black;
    color: #fff;
    padding: 1rem;
    width: 12rem;
}

3、水平垂直居中

3.1、固定寬高元素水平垂直居中

通過margin平移元素整體寬度的一半，使元素水平垂直居中。

<div class="parent">
    <div class="child">控制復雜性是計算機編程的本質。</div>
</div>

.parent {
    height: 140px;
    position: relative;
    border: 2px dashed #f69c55;
}
.child {
    width: 200px;
    height: 80px;
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -110px;
    background: black;
    color: #fff;
}

3.2、未知寬高元素水平垂直居中

利用2D變換，在水平和垂直方向都反向平移寬高的一半，從而使元素水平垂直居中。

<div class="parent">
    <div class="child">當你試圖解決一個你不理解的問題時，復雜化就產成了。當你試圖解決一個你不理解的問題時，復雜化就產成了。</div>
</div>

.parent {
    height: 140px;
    position: relative;
    border: 2px dashed #f69c55;
}
.child {
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background: black;
}

3.3、利用flex布局

利用flex布局，其中justify-content用於設置或檢索彈性盒子元素在主軸上方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側軸方向上的對齊方式。

<div class="parent">
    <div class="child">Facebook wasn't built in a day.</div>
</div>

.parent {
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px dashed #f69c55;
}
.child {
    padding: 20px;
    background: black;
    color: #fff;
}

最后附贈一張居中總結的圖