on 2014-04-07

CSS - 垂直置中

文字垂直置中

之前 ApplyBOY 在網路上分享了一個 CSS 垂直置中的一個解法 這裡整理出個小小模組出來

假如那一個區域內的東西需做垂直置中, 在該區域的 element 加上 class vertical-centering

.vertical-centering:before {
  content: '';
  display: inline-block;
  vertical-align: middle ;
  height: 100%;
}

該區域的文字就會垂直置中

Example

區域垂直置中

如要在一區域內有一小塊區域置中則需把該區域做 vertical-align: middle;

.vertical-centering-area {
  vertical-align: middle;
}

.vertical-centering:before {
  content: '';
  display: inline-block;
  vertical-align: middle ;
  height: 100%;
}

Example

Refer - CSS 垂直置中解法