css水平垂直居中的几种方法

HTML

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

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;
}

6、 计算属性

#box{
	width: 300px;
    height: 300px;
    border: 1px solid red;
}
.box{
	width: 100px;
	height: 100px;
	background-color: blueviolet;
	margin:calc((100% - 100px)/2);
}