盒子水平垂直居中的几种方法

盒子水平垂直居中的几种方法

• *HTML*
• ***style***
• 1、position + 负外边距
• 2、position + margin: auto
• 3、position + transform
• 4、父盒子（flex）
• 5、父盒子（flex） + 子盒子（center）

HTML

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

style

1、position + 负外边距

#box{
	width: 300px;
    height: 300px;
    border: 1px solid red;
    position: relative;
}
.box{
	width: 100px;
	height: 100px;
	background-color: blueviolet;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -50px;
	margin-top: -50px;
}

2、position + margin: auto

#box{
	width: 300px;
    height: 300px;
    border: 1px solid red;
    position: relative;
}
.box{
	width: 100px;
	height: 100px;
	background-color: blueviolet;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

3、position + transform

#box{
	width: 300px;
    height: 300px;
    border: 1px solid red;
    position: relative;
}
.box{
	width: 100px;
	height: 100px;
	background-color: blueviolet;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

4、父盒子（flex）

#box{
	width: 300px;
    height: 300px;
    border: 1px solid red;
    position: flex;
    justify-content: center; /* 水平居中*/
    align-items: center; /* 垂直居中、*/
}
.box{
	width: 100px;
	height: 100px;
	background-color: blueviolet;
}

5、父盒子（flex） + 子盒子（center）

#box{
	width: 300px;
    height: 300px;
    border: 1px solid red;
    position: flex;
    justify-content: center; /* 水平居中*/
}
.box{
	width: 100px;
	height: 100px;
	background-color: blueviolet;
	align-self: center;
}

来源：CSDN

作者：雪月凡画

链接：https://blog.csdn.net/weixin_45939247/article/details/103540260