css面试题实现元素垂直水平居中-包括未知宽高的元素五种回答

最新推荐文章于 2025-08-12 18:03:27 发布

转载最新推荐文章于 2025-08-12 18:03:27 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#面试

本文介绍了五种常见的CSS实现元素垂直水平居中的方法，包括已知宽高的定位加负边距、未知宽高的定位加margin、定位加transform、弹性盒子模型及table特性等，并提供了每个方法的兼容性和示例。

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

css实现元素垂直水平居中-包括未知宽高的元素

这个一道很经典的面试题，做项目中也常会出现这样的需求。现在我就用几种比较常用的方法。兼容性也列出来。

第一种已知宽高（定位加负边距解决）兼容到IE6

position: absolute;
z-index: 8;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-left: -100px;
margin-top: -100px;
background: red;
复制代码

demo地址 JSBin

第二种未知宽高 (定位加margin解决) 兼容到IE8 移动端推荐使用

position: absolute;
z-index: 8;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 200px;
height: 200px;
margin: auto;
background: red;
复制代码

如果改变宽度和高度还是垂直水平居中的。 demo地址 JSBin

第三种未知宽高 (定位加transform解决) 兼容到IE9 移动端推荐使用

position: absolute;
z-index: 8;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
transform: translate(-50%, -50%);
background: red;
复制代码

如果改变宽度和高度还是垂直水平居中的。 demo地址 JSBin

第四种未知宽高 (弹性盒子模型解决) 兼容到IE10

display: flex;
display: -webkit-flex;
align-items:center;
justify-content: center;
复制代码

如果改变宽度和高度还是垂直水平居中的。 demo地址 JSBin

第五种未知宽高 (table特性解决的) 兼容到IE6 PC端推荐使用

#box{
    width: 100px;
	height:100px;
	text-align:center;
	font-size:0;
    background: red
}
#box:after,#box span{
	display:inline-block;
	*display:inline;
	*zoom:1;
	width:0;
	height:100%;
	vertical-align:middle;
}
#box:after{
	content:'';
}
#box p{
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;
	font-size:16px;
}
复制代码

demo地址 JSBin