更多
更多
文章目录
  1. 1.单行垂直居中
  2. 2.table-cell
  3. 3.绝对定位+0
  4. 4.绝对定位+负边距实现居中
  5. 5.通过:after来占位
  6. 6.flex弹性布局居中

关于实现垂直居中方法总结

2017.08.20 chen7 前端  热度 ℃

项目里经常在元素排列时会需要垂直居中的情况，以下在使用场景和条件限制上总结部分常用的一些垂直居中方法。

1.单行垂直居中

将元素的height和line-height设定为相同的值即可;

2.table-cell

利用display:table-cell赋予div类似于table等标签的表格布局特性,

1
2
3
4
5
6
7
8
.middle{
	text-align: center;
	display: table-cell;
        //以单元格方式进行解析
        //此时避免使用float和position等其他属性以免冲突影响
	vertical-align: middle;		
	//垂直居中
    }

此方法兼容所有浏览器
关于table的更多使用可以参考
css Table布局-display:table
display:table-cell实现水平垂直居中

3.绝对定位+0

需要确定内部元素的高度才能生效：

1
2
3
4
5
6
7
8
9
10
11
12
.middle-wrapper{
    position:relative;
}
.middle{
	height: 40px;
	position: absolute;
	margin: auto; 
  	top: 0; 
  	left: 0; 
  	bottom: 0; 
  	right: 0; 
}

此方法兼容所有浏览器

4.绝对定位+负边距实现居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.list li .btn{
		display: inline-block;
		cursor: pointer;
		border:1px solid #3a8eff;
		border-radius: 5px;
		color: #3a8eff;
		height: 40px; 
		line-height: 40px;
		position: absolute;
		top: 50%;
		width: 100%;
		left: 0;
		margin-top: -20px; /*子元素需要设定高度*/
		/*transform:translateY(-50%);*/ 
	}

类似的负边距结合transform也可以实现垂直居中,此时子元素不需要设定高度也可以，但是不能兼容ie678。

5.通过:after来占位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box{
  text-align:center;
  font-size:0;
}
.box span{
  font-size:16px;
}
.box:after{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

6.flex弹性布局居中

  • 在父元素上设置相关属性即可使子元素居中：

    1
    2
    3
    4
    5
    .wrap{
      display:flex; /*使用flex盒子*/
      justify-content:center;/*水平轴上居中*/
      align-items:center;/*垂直轴上居中*/
    }

  • 父元素设置为弹性容器display:flex，子元素设置magrin:auto ：

    1
    2
    3
    4
    5
    6
    .wrap{
      display:flex;
    }
    .child{
      margin: auto;
    }
感谢阅读
公众号