css-垂直居中布局解决方案 · 志强vlog

指当前元素在父级元素容器中，垂直方向居中显示

• 方案一：table-cell + vertical-algin 属性配合使用

<div class="parent">
 <div class="child">居中文字</div>
</div>
<style>
        /*
        table 设置table元素
        table-cell 设置元素td元素
        */
        display: table-cell;
       /* 
       * vertical-align属性 用于设置文本内容垂直方向对齐方式
       * top 顶部对齐
       * middle 居中对齐 
       * bottom 底部对齐
       */
        vertical-align: middle;
</style>

• 方案二：absolute + transfrom属性配合使用

.parent {
 position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}