web前端入門到實戰：html中div使用CSS實現水平/垂直居中的多種方式

CSS中的居中，在工作中，會經常遇到。它可以分為水平居中和垂直居中，以下是幾種實現居中的方式。

以下例子中，涉及到的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 >塊狀元素，水平居中</i>

</div>

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

2：margin: 0 auto，水平居中

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

<div class="parent-frame">
  子元素水平居中
  <i class="child-frame" >塊狀元素，水平居中</i>
</div>

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

3：line-height值，垂直居中

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

<div class="parent-frame">
  <div >line-height值=父height值</div>
</div>
web前端開發學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法
（從零基礎開始到前端項目實戰教程，學習工具，職業規劃）

line-height值=父height值

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

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

記得將父元素清除浮動。

<div class="parent-frame">

  <div  >

    <div >雖然寬度不同weiqinl</div>

  </div>

  <div >

    <div >但一樣</div>

  </div>

  <div >

    <div >水平居中了</div>

  </div>

  <div >

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

      水平居中添加text-align:center

    </td>

  </tr>

</table>
web前端開發學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法
（從零基礎開始到前端項目實戰教程，學習工具，職業規劃）

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

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

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

<div class="parent-frame" >

  仿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" >

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

  <div class="child-frame" >

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

  </div>

</div>

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

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

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

<div class="parent-frame" >

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

  <div class="child-frame" >

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

  </div>

</div>

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

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

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

<div class="parent-frame" >

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

  <div class="child-frame" >

    不需知具體大小。支持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" >

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

  <div class="child-frame">

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

  </div>

</div>
web前端開發學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法
（從零基礎開始到前端項目實戰教程，學習工具，職業規劃）

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

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

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

<div class="parent-frame" >

  <div >父元素使用flex布局，子元素配合margin:auto使用</div>

</div>

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