子元素在父元素中上下左右居中

最新推荐文章于 2025-05-31 12:59:09 发布

ZJ_152261

最新推荐文章于 2025-05-31 12:59:09 发布

阅读量2.6k

点赞数 2

分类专栏： html

html 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了四种常用的CSS居中布局方法：通过内边距、margin:auto结合绝对定位、弹性盒子及transform属性。每种方法均有详细的代码示例，并讨论了它们的适用场景和局限性。

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

1.将父元素与子元素宽高设置相同，此时在父元素中设置上、右、下、左为相等内边距值。[不推荐使用]

此处注意内边距的百分比，不论上下左右，均是相对于父元素的width来计算的，与父元素的height无关；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	.box-one{
		width:50px;            /*指定父级元素宽度，否则默认为浏览器宽度*/
		background-color:red;
		/*padding-top:20%;    将padding的四个值分开写
		padding-bottom:20%;
		padding-left:20%;
		padding-right:20%;*/
		padding:20%;		
	}
	.box-two{
		width:50px;
		height:50px;
		background-color:blue；	
	}
</style>
</head>
<body>
	<div class="box-one">
		<div class="box-two"></div>
	</div>
</body>
</html>

2.margin：auto在绝对定位下水平垂直居中 [需知子元素长宽，尽量避免运用定位不推荐]

具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	.father{
		width:200px;
		height:200px;
		position:relative;
		background-color:red;
		
	}
	.son{
		position:absolute;
		width:100px;
		height:100px;
		background-color:blue;
		top:0;left:0;right:0;bottom:0;/*在距离父级元素的上下左右各自值之后围成的区域之中进行下面的水平和垂直居中*/
		margin:auto;
	}
</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

3.利用弹性盒子（flex） [推荐]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.father {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.son{
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}
</style>
</head>
<body>

<div class="father">
  <div class="son">Perfect centering!</div>
</div>

</body>
</html>

将父级元素设置为弹性容器，在其子元素中设置margin:auto;即可实现居中。

[推荐]

4.利用绝对定位，transform(css3)兼容性不好，~~IE10+以及其他现代浏览器才支持~~, IE9(-ms-), IE10+以及其他现代浏览器才支持。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	.father{
		width:200px;
		height:200px;
		position:relative;
		background-color:red;
		
	}
	.son{
		position:absolute;
		width:100px;
		height:100px;
		background-color:blue;
		top:50%;left:50%;                   /*绝对定位将子元素左上顶点置于父元素的正中心，后利用transform进行偏移*/
		transform:translate(-50%,-50%);    /*translate移动为相对自身的宽高*/
	}
</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>

</body>
</html>