css-垂直居中布局解决方案

2020-06-09 前端 css

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

  • 方案一：table-cell + vertical-algin 属性配合使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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属性配合使用
1
2
3
4
5
6
7
8
.parent {
	position: relative;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}