css div盒子居中的方法？

最新推荐文章于 2025-05-25 18:34:15 发布

努力学习的小丸子

最新推荐文章于 2025-05-25 18:34:15 发布

阅读量3.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue学习笔记

本文链接：https://blog.youkuaiyun.com/weixin_44535797/article/details/89286686

vue学习笔记专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍五种常用的网页元素居中布局方法，包括使用margin属性、flex布局、绝对定位、inline-block元素及transform属性，适用于不同场景和元素类型的居中需求。

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

如何让盒子居中？

1、block元素，使用margin属性


.center {
    margin: auto;
    width: 90%;
    border: 3px solid #73AD21;
    padding: 10px;
}
<div class="center">
  <p>我是居中盒子，当width为100%时，margin属性失效。但是盒子还是处于居中状态</p>
</div>

</body>
</html>

2、block元素，在flex容器上使用justify-content:center

注意，不要再元素加fle:1，否则会无法调节div块儿的宽度。以下代码同时可以让div盒子垂直居中

<div class="first">
			<div class="second">
				ddd
			</div>
		</div>

		<style type="text/css">
			.first {
				width: 200px;
				height: 200px;
				background: rgba(255, 255, 0, 0.5);
				display: flex;
				justify-content: center;
				align-items: center;  //配合下方的指定高度样式，可以让div同时垂直居中
			}
			
			.second {
				/*flex: 1;*/
				background: pink;
				height: 50%;
			}
		</style>

3、block 元素，绝对定位、margin-left:-(width/2)和left:50%实现水平居中：

<div class="first">
</div>
		<style type="text/css">
			.first {
				width: 200px;
				height: 50px;
				position: absolute;
				left: 50%;
				margin-left: -100px;
				background: pink;
			}
		</style>

4、inline-block元素，在父级块级元素上使用text-align:center

div{
text-align:center;
}
<div><span>ddd</span></div>

5、任意类型元素。left:50%+tranfrom:translateX(-50%)

<template>
	<div class="box">
		<div class="center">
			
		</div>
	</div>
</template>

<script>
</script>

<style lang="scss" scoped="scoped">
.box{
	width: 90%;
	height: 20%;
	background: red;
	position: relative;
	.center{
		width: 10%;
		height: 100%;
		background: green;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
}
</style>