CSS中的居中，在工作中，會經常遇到。它可以分為水平居中和垂直居中，以下是幾種實現居中的方式。
git 檢視原始碼
配合線上預覽，效果更佳

以下例子中，涉及到的CSS屬性值。

    .parent-frame {

      width: 200px;

      height: 200px;

      border: 1px solid red;

    }

    .child-frame {

      width: 100px;

      height: 100px;

      border: 1px dotted blue;

    }

1: text-align:center，水平居中

塊狀元素，水平居中

  <div class="parent-frame">

    子元素水平居中

    <i style="display:block; text-align: center;color: blue">塊狀元素，水平居中</i>

  </div>

子元素水平居中 塊狀元素，水平居中

2：margin: 0 auto，水平居中

水平居中。上下外邊框距為0，左右外邊距瀏覽器會自動計算平分

  <div class="parent-frame">
    子元素水平居中
    <i class="child-frame" style="display: block;margin: 0 auto">塊狀元素，水平居中</i>
  </div>
 

子元素水平居中 塊狀元素，水平居中

3：line-height值，垂直居中

垂直居中。line-height屬性，設定行間的距離（行高）。不允許使用負值。
單行文字的元素才適用，多行元素中不適用這種方法。元素內容是單行，並且其高度是固定不變的，

  <div class="parent-frame">
    <div style="line-height: 200px;">line-height值=父height值</div>
  </div>

line-height值=父height值

4： 使用float屬性，配合relative定位，實現水平居中

給父元素設定float，然後將父元素整體向右移動50%，再將子元素整體向左移動50%，來實現水平居中。

記得將父元素清除浮動。

  <div class="parent-frame">

    <div style="float: left; position: relative; left: 50%; clear: both;" >

      <div style="position: relative; left: -50%">雖然寬度不同weiqinl</div>

    </div>

    <div style="float: left; position: relative; left: 50%; clear: both;">

      <div style="position: relative; left: -50%">但一樣</div>

    </div>

    <div style="float: left; position: relative; left: 50%; clear: both;">

      <div style="position: relative; left: -50%">水平居中了</div>

    </div>

    <div style="float: left; position: relative; left: 50%; clear: both;">

      <div style="position: relative; left: -50%">使用float屬性，記得清楚浮動</div>

    </div>

  </div>

雖然寬度不同weiqinl 但一樣 水平居中了 使用float屬性，記得清楚浮動

5：使用table佈局，預設垂直居中

table預設垂直居中vertical-align:middle。如果還想要水平居中，那就是行內元素，新增屬性text-align: center

  <table class="parent-frame">

    <tr>

      <td>

        table預設垂直居中[vertical-align: middle]

      </td>

      <td style="text-align:center;">

        水平居中新增text-align:center

      </td>

    </tr>

  </table>

table預設垂直居中[vertical-align: middle]

水平居中新增text-align:center

6: 仿table，display:table-cell。並使用vertical-align屬性,實現垂直居中

該屬性設定元素的垂直對齊方式。

定義行內元素的基線相對於該元素所在行的基線的垂直對齊。在表單元格中，這個屬性會設定單元格框中的單元格的對齊方式。

  <div class="parent-frame" style="display: table-cell;vertical-align: middle">

    仿table: display:table-cell垂直居中vertical-align:middle

  </div>

仿table: display:table-cell垂直居中vertical-align:middle

7: 使用absolute絕對定位，配合margin使用，實現水平垂直居中

相對應於relative的絕對定位absolute，需要定寬。同時，top/bottom應該相等，並且相加不超過定寬度。 right/left也應該相等，並且相加不超過定寬。

再配合margin： auto使用

  <div class="parent-frame" style="position: relative">

    利用絕對定位，配合margin:auto自動計算外邊距。

    <div class="child-frame" style="position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;">

      定寬元素,需要確定的尺寸。relative是為了給子元素定位用。

    </div>

  </div>

利用絕對定位，配合margin:auto自動計算外邊距。 定寬元素,需要確定的尺寸。relative是為了給子元素定位用。

8: 使用absolute絕對定位，配合margin的負值(negative margins)來實現水平垂直居中。

negative margins負邊距，會使結構塌陷，利用這個特點來實現。

  <div class="parent-frame" style="position: relative;">

    利用絕對定位，配合margin的負值來實現居中。

    <div class="child-frame" style="position: absolute; top: 50%; left: 50%; margin-top: -51px; margin-left: -51px;">

      負邊距來實現，水平垂直居中。需要知道該元素的具體大小

    </div>

  </div>

利用絕對定位，配合margin的負值來實現居中。 負邊距來實現，水平垂直居中。需要知道該元素的具體大小

9: 使用absolute絕對定位，配合translate 移動轉換，實現水平垂直居中

使用百分比來絕對定位一個元素，並配合使用translate，將元素移動定位居中。

  <div class="parent-frame" style="position: relative;">

    利用絕對定位，配合translate移動到水平垂直居中。

    <div class="child-frame" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">

      不需知具體大小。支援IE9+及現代瀏覽器

    </div>

  </div>

利用絕對定位，配合translate移動到水平垂直居中。 不需知具體大小。支援IE9+及現代瀏覽器

10： 使用flex佈局,設定其屬性justify-content，align-items都為center，實現水平垂直居中

父元素使用flex佈局,並定義兩個屬性值justify-content，align-items都為center，那麼就定義為水平垂直居中

justify-content屬性定義了專案在主軸上的對齊方式。align-items屬性定義專案在交叉軸上如何對齊。

  <div class="parent-frame" style="display: flex; justify-content: center; align-items: center">

    <div class="child-frame">使用flex佈局，justify-content屬性定義了專案在主軸上的對齊方式。</div>

    <div class="child-frame">

      align-items屬性定義專案在交叉軸上如何對齊。 兩個屬性都居中，則水平、垂直居中對齊

    </div>

  </div>

使用flex佈局，justify-content屬性定義了專案在主軸上的對齊方式。 align-items屬性定義專案在交叉軸上如何對齊。 兩個屬性都居中，則水平、垂直居中對齊

11: 利用flex佈局，配合margin：auto使用，實現水平垂直居中。

父元素使用flex佈局，子元素使用margin: auto

  <div class="parent-frame" style="display: flex;">

    <div style=" margin: auto;">父元素使用flex佈局，子元素配合margin:auto使用</div>

  </div>

父元素使用flex佈局，子元素配合margin:auto使用

[完]