关于垂直居中的方法
情景1 :让容器内的文本垂直居中
引入“幽灵元素”
首先,先设置容器和文本为行内块元素(display: inline-block)
其次,添加容器伪元素 before,并给伪元素 before 添加以下属性:
.author-meta::before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
让伪元素成为一个行内块元素,并占据100%容器高度,这个元素会让 middle 关键字认为容器的垂直中点是对齐点
之后在给容器内的文本设置 vertical-align: middle
属性即可实现容器内居中~