css如何实现垂直居中

2017-03-07   |     |     |  

padding

有时候居中仅仅是因为上下的padding一样而已。

单行文字——使用line-height

如果只有单行文字,并且你知道不会断行,有一个,把line-height设置成和外框一样高度就可以实现文字垂直居中

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

注意:只能用于你确定不会超过一行的文字内容,否则!就会出现很尴尬的情况!!

table大法

table里面有一个vertical-align:middle 的属性可以实现居中,你只要模拟一个table出来就行了,即外面套一个table里面套一个table-cell

神奇的伪类居中

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

flex大法

用flex一切都简单了

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}