SOURCE

console 命令行工具 X clear

                    
>
console
// 垂直居中的比较少,列出两种方案,一个是设置line-height为父元素高度,
// 不知道为什么设置100%不行
// 使用Flex布局,设置父元素为display:flex;和align-item:center
<div class="test1">
  <span>
    单行文本
  </span>
</div>
<hr />
<div class="parent">
  <div class="child">
    Flex布局
  </div>
</div>
.test1 {
  background: red;
  height: 100px;
  line-height: 100px;
}

.parent {
  display: flex;
  height: 200px;
  align-items: center;
  background: #b0b0b0
}

.child {}