div 盒子居中方法

最新推荐文章于 2022-07-03 00:33:09 发布

一个大桃子

最新推荐文章于 2022-07-03 00:33:09 发布

阅读量6.3k

点赞数 3

文章标签： html css

本文链接：https://blog.csdn.net/weixin_42958028/article/details/90409978

版权

1. margin 方法

.div{
	width: 500px;
	height: 500px;
	border: 1px solid red;
	
	/*居中*/
	position: relative;
}
.box{
	width: 100px;
	height: 100px;
	background: #999999;
	
	/*居中*/
	position: absolute;
	top:50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -50px;
}


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

2. transform方法

不知道盒子宽高情况

.div{
	width: 500px;
	height: 500px;
	border: 1px solid red;
	
	/*居中*/
	position: relative;
}
.box{
	width: 100px;
	height: 100px;
	background: #999999;
	
	/*居中*/
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

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

2. margin:auto居中

.div{
	width: 500px;
	height: 500px;
	border: 1px solid red;
	
	/*居中*/
	position: relative;
}
.box{
	width: 100px;
	height: 100px;
	background: #999999;
	
	/*居中*/
	position: absolute; 
 	left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0;   
 	margin: auto;
}

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