豎直居中方式總結

CarterLi發表於2017-08-28

已知有

html, body {
  margin: 0;
  height: 100%;
}

#child {
  width: 200px;
  height: 200px;
  background: black;
}
<div id="child"></div>

將元素 #child 豎直居中於視窗中部

絕對定位法 1

對未知高度的元素適用。jsfiddle

#child {
  position: absolute; /* fixed */
  top: 50%;
  transform: translateY(-50%);
}

注意此法中的 top: 50% 不能以 margin-top: 50% 代替。因為給 margin-top 設定百分比值時使用的是父元素的寬度而非高度。

絕對定位法 2

只適用於固定高度的內部元素。jsfiddle

#child {
  position: absolute; /* fixed */
  top: 0;
  bottom: 0;
  margin: auto 0;
}

表格佈局法

vertical-align 作用於表格元素時，會對錶格中的元素起作用。
對未知高度的元素適用。jsfiddle

html {
  display: table;
}

body {
  display: table-cell;
  vertical-align: middle;
}

行排布法

vertical-align 作用於非表格內聯（塊）元素時，是控制元素本身在當前行的豎直位置。記得把父元素的字號設定為 0。
對未知高度的子元素適用，但是要已知父元素高度。jsfiddle

body {
  font-size: 0;
  line-height: 100vh;
}

#child {
  display: inline-block;
  vertical-align: middle;
}

伸縮盒法 1

簡單粗暴的方法，不需要管子元素按行還是按列排列。
對未知高度的元素適用。jsfiddle

body {
  display: flex;
}

#child {
  margin: auto 0;
}

伸縮盒法 2

注意對於不同的排列方式 flex-direction 選擇不同的 CSS 屬性 align-items: center 或 justify-content: center。好處是 autoprefix 後相容舊版 flexbox 語法。
對未知高度的元素適用。jsfiddle

body {
  display: flex;
  align-items: center;
}

豎直書寫模式法 1

如果將書寫模式改為豎直，text-align 就變為豎直居中。
對未知高度的元素適用。jsfiddle

body {
  writing-mode: vertical-lr;
  text-align: center;
}

#child {
  display: inline-block;
}

豎直書寫模式法 2

類似的，將書寫模式改為豎直，塊元素就變為獨佔一列，margin: auto 0 就會生效。
需要固定內部元素高度。jsfiddle

body {
  writing-mode: vertical-lr;
}

#child {
  margin: auto 0;
}

如有遺漏歡迎補充 ?

相關文章