html中div使用CSS實現水平/垂直居中的多種方式

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使用

git 查看源碼
在線預覽

[完]