CSS样式让元素上下左右居中

最新推荐文章于 2025-05-18 11:03:17 发布

shea_mong

最新推荐文章于 2025-05-18 11:03:17 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： css

本文链接：https://blog.youkuaiyun.com/sinat_22480443/article/details/115130968

前端开发专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍了如何通过CSS实现元素在页面上的垂直和水平居中，包括自适应高度、相对定位及margin或transform的使用方法，帮助开发者理解和掌握盒子布局的灵活性。

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

一、元素垂直居中

让父元素高度自适应，子元素高度自动撑开父级的高度，再给父元素设置相同的上下边距。

二、元素水平居中

子元素宽度低于父盒子宽度，可设置子盒子的margin值，水平方向的值都设置为auto。（auto只在水平方向有作用，边距会自动无限增大，直到撑满整个父元素除了子元素宽度之外剩余的区域，如果两个水平方向都是auto，两边都要无限大，只能达到一个平衡，两边距离相同，导致盒子居中。）
子元素宽度大于父盒子宽度，设置子元素相对定位，设置偏移量left=50%，[a、设置子盒子margin-left=(子盒子自身宽度的一半的负数)]或者[设置子盒子位移transform=translate(-50%)]。

.son {
	position : relative;
	left : 50%;
	top : 50%;
	width : 100px;
	height : 100px;
	/* 让 子元素 在父元素 中 水平居中*/
	margin-left : -50px; 
	/* 让 子元素在 父元素 垂直居中*/
	margin-top : -50px;
	
	/*或者 采用位移直接 ，和 上面的选择一种即可*/
	/*translate(x,y)分别为水平和垂直方向位移的距离*/
	transform = translate(-50%,-50%) 
}