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

最新推荐文章于 2025-04-18 20:43:03 发布

weixin_33895016

最新推荐文章于 2025-04-18 20:43:03 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a5344f26fb9a01cb31606b6

本文总结了六种常用的CSS垂直居中方法，包括单行垂直居中、利用table-cell、绝对定位结合0或负边距、通过:after伪元素占位及使用flex弹性布局等，适用于不同场景和需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

1.单行垂直居中

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

2.table-cell Demo

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

.middle{
	text-align: center;
	display: table-cell;
        //以单元格方式进行解析
        //此时避免使用float和position等其他属性以免冲突影响
	vertical-align: middle;		
	//垂直居中
    }
复制代码

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

3.绝对定位+0 Demo

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

.middle-wrapper{
    position:relative;
}
.middle{
	height: 40px;
	position: absolute;
	margin: auto; 
  	top: 0; 
  	left: 0; 
  	bottom: 0; 
  	right: 0; 
}
复制代码

此方法兼容所有浏览器

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

.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来占位 Demo

.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弹性布局居中

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

.wrap{
  display:flex; /*使用flex盒子*/
  justify-content:center;/*水平轴上居中*/
  align-items:center;/*垂直轴上居中*/
}
复制代码

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

.wrap{
  display:flex;
}
.child{
  margin: auto;
}
复制代码