CSS常用水平垂直居中的几种方法

HTML代码如下：

<div class="outer">
    <div class="inner"></div>
  </div>

css代码如下：

.outer {
	width: 600px;
	height: 600px;
	border: 1px solid #f00;
}

.inner {
	width: 200px;
	height: 200px;
	background-color: aqua;
}

1. 子元素相对于父元素绝对定位，子元素top，left设置50%，子元素margin-top和margin-left减去各自宽高的一半

.outer {
	width: 600px;
	height: 600px;
	border: 1px solid #f00;
	position: relative;
}

.inner {
	width: 200px;
	height: 200px;
	background-color: aqua;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -100px;
	margin-top: -100px;
}

2. 子元素相对父元素绝对定位，子元素top，left值为50%，transform：translate（-50%，-50%）

.outer {
	width: 600px;
	height: 600px;
	border: 1px solid #f00;
	position: relative;
}

.inner {
	width: 200px;
	height: 200px;
	background-color: aqua;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

3. 子元素相对于父元素绝对定位，子元素上下左右全为0，然后设置子元素margin： auto

.outer {
	width: 600px;
	height: 600px;
	border: 1px solid #f00;
	position: relative;
}

.inner {
	width: 200px;
	height: 200px;
	background-color: aqua;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

4. 子元素相对定位，子元素top，left值为50%，transform: translate(-50%, -50%)；

.outer {
	width: 600px;
	height: 600px;
	border: 1px solid #f00;
}

.inner {
	width: 200px;
	height: 200px;
	background-color: aqua;
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

5. 父元素设置弹性盒子，display：flex； justify-content：center ；align-items：center；

.outer {
	width: 600px;
	height: 600px;
	border: 1px solid #f00;
	display: flex;
	justify-content: center;
	align-items: center;
}

.inner {
	width: 200px;
	height: 200px;
	background-color: aqua;
}

6. 父元素设置display：table-cell; vertical-align：middle; 子元素设置margin：auto。

.outer {
	width: 600px;
	height: 600px;
	border: 1px solid #f00;
	display: table-cell;
	vertical-align: middle;
}

.inner {
	width: 200px;
	height: 200px;
	background-color: aqua;
	margin: auto;
}