再看垂直居中

[naseeihity]

之前总结过水平垂直居中的方法,
以及CSS-tricks中也有清晰的总结。

最近发现项目中其他人写的样式中大量使用了display:table-cell去实现水平垂直居中.

.father{
  display: table-cell;
  width: 500px;
  height: 300px;
  background-color: #de3;
  vertical-align: middle;
  text-align: center;
}

.child{
  display: inline-block;
  max-width:400px;
  max-height:200px;
  background-color: #fd2;
}

优势在于不会有position：absolute的负面影响

以及实现多行元素垂直居中：

.father{
  display: table-cell;
  width: 100px;
  height: 200px;//高度设置无效
  background-color: #de3;
  vertical-align: middle;
  text-align: center;
  word-break: normal;
}

这一方法的问题在于：

• 高度设置无效
• overflow设置无效
• margin不感知
• 与 position/float等存在冲突

多行文字垂直居中：

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

.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;
}