CSS垂直置中的4種方法

這是一道送分題，如果想要垂直置中元素的話，起碼會有四種方法：padding, line-height, table 和 Flexbox。使用Flexbox的話，日後要更改元素的位置會非常方便。

padding

如果你要置中的元素是inine或者是inline-*的話，比如說文字和鏈接，你可以用padding來實現垂直置中：

.vCenter {
  padding-top: 30px;
  padding-bottom: 30px;
  background: #eee;
  text-align: center;
}

因為padding-top和padding-bottom的數值是一樣，所以我們可以透過這個方法來實現垂直置中。

.anotherCenter {
  height: 100px;
  line-height: 100px;
  background: #6cf;
  text-align: center;
}

如果你不想用padding來實現垂直置中的話，你可以利用line-height等於height。

你可以透過valign來控制位置。

另外，你可以利用display: table-cell來改變顯示的方式。

.fakeTable {
  height: 200px;
  width: 200px;
  display: table-cell;
  border: 1px solid black;
  text-align: center;
  vertical-align: middle;
}

另外，你也可以使用Flexbox來實現垂直置中，只需要寫justify-content和align-items就可以了。

.vertical-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}