Bootstrap 3 讓物件垂直置中的新方法

之前要垂直置中

不外乎就是設定height跟line-height

不然就是parent position relative

child position absolute

top, right, bottom, left = 0

或是這篇文章有提供六種垂直置中方法

今天看到一個沒看過的用法

用flex box

老實講我還沒深入研究

所以在此紀錄一下

主要是出自這篇 stackoverflow

他的 example

主要的 css

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

效果

Full-height columns with vertical aligned contents in Twitter Bootstrap

Bootstrap 3 讓物件垂直置中的新方法

留言