CSS 中的垂直居中法

Blog 原文連接

咱們都清楚元素相對其父級元素水平居中展現的方法：對於inline 的元素，咱們都會想到爲其父級元素設置tex-align : center。對於block 元素，咱們會設定其 margin: 0px auto。 然而，垂直居中的實現方法，並無這麼簡單，如下列出 6 種垂直居中法。

參考文章：6 Methods For Vertical Centering With CSS

Vertical-Align

既然有水平居中屬性text-align: center, 咱們的第一反應、實現水平居中的方法應該是vertical-align: middle。

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

But !!!

Vertical-align <strong>doesn’t apply to block-level elements</strong> like a paragraph inside a div.

如此可知：這個方式確實直觀且有效，<strong>但其適用範圍僅僅限於 table cell 中的內容</strong>。

這也是初學者會容易踩坑且十分困惑的一個問題。

CSS table 中 Vertical-Align 垂直居中示例：

<div class="parent">
  <div class="child">Content here</div>
</div>

<br />

.parent {display: table;}

<br />

.child {
  display: table-cell;
  vertical-align: middle;
}

Line-Height

該方法適用於單行文本(或圖片)的垂直居中，咱們須要作的僅僅是將line-height屬性設置的大於font-size，且等於容器的高度。

<div class="content">
  Text here
</div>

<br />

.content{
  height:200px; /*沒必要要*/
  line-height: 200px;
}

固然，咱們也能夠不設置父級元素的高度，而是讓子元素將其撐開，一樣能達到效果。

同理，圖片和單行文本同樣，也爲inline元素，也能夠經過設置容器的line-height達到居中效果：

<div class="content">
  <img src="image.png" alt="" />
</div>

<br />

.content {
  line-height: 200px;
}

<br />

#parent img {
  vertical-align: middle; /*調整基線位置，不是設定垂直居中哦~*/
}

絕對定位 and 負 Margin

這裏經過絕對定位將目標元素左上角定位在父級元素的中央位置，而後經過設定目標元素的margin屬性使其中心點與父級元素重合，適用於全部block元素。

<div class="parent">
  <div class="child">Content here</div>
</div>

<br />

.parent {
  position: relative;
  height: 800px;
}

<br />

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 30%;
  width: 50%;
  margin: -15% 0 0 -25%; /*margin 爲負值且爲自身尺寸的一半*/
}

然而，使用這種方法常常會出現父級容器中的內容溢出， 因此最好在知道父級元素的寬度和高度時使用該方法。

絕對定位 and Stretching

這裏經過絕對定位並設置top, bottom, right, and left 爲 0 ，將目標元素拉伸至父級元素的全部 4 個邊。 再設置 margin 爲 auto，使得 上下和左右 margin 相等。則實現徹底的劇中效果。適用於全部block元素。

<div class="parent">
  <div class="child">Content here</div>
</div>

<br />

.parent {
  position: relative;
  height: 300px;
}

<br />

.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 50%;
  height: 30%;
  margin: auto;
}

這種方法，在IE 8 如下不 work ...

絕對定位 and transform3d

這裏經過絕對定位將目標元素左上角定位在父級元素的中央位置，而後經過設定目標元素的transform3d屬性使其中心點與父級元素重合，適用於全部block元素。

<div class="parent">
  <div class="child">Content here</div>
</div>

<br />

.parent {
  position: relative;
  height: 300px;
}

<br />

.child {
  position: absolute;
  top:50%;
  left:50%;
  width: 150px;
  height: 130px;
  transform:translate3d(-50%,-50%,0); /*向左向上移動自身尺寸的一半*/
}

IE 8 如下不 work ...

css3 中的 Flex 佈局

將父級容器設置爲 Flex 容器，並規定子項目的排列方式。詳細參見 Flex 佈局教程

<div class="parent">
  <div class="child">Content here</div>
</div>

<br />

.parent {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;

  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;

	/* 子元素主軸（默認爲水平軸）上居中*/
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-pack:center;/* IE 10 */
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;/* IE 11+,Firefox 22+,Chrome 29+,Opera 12.1*/

  /* 子元素交叉軸（默認爲縱軸）居中 */
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-align: center;/* IE 10 */

  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;

  height: 300px;
}

.child {
  width: 150px;
  height: 130px;
}

支持 CSS3 的瀏覽器可用， 因爲個瀏覽器廠商各異，致使各類前綴眼花繚亂。