CSS水平垂直居中的6种方式

先来一段公共css：

.box{
	width: 100px;
	height: 100px;
	background-color: #008DF0;
	margin-right: 20px;
	float: left;
}
.box_s{
	width: 10px;
	height: 10px;
	background-color: #fff;
}
复制代码

绝对定位方式

html结构：

<div class="box box_f1">
	<div class="box_s box_1"></div>
</div>
复制代码

css:

.box_f1{
	/* 绝对定位方式 -- 须要对父级元素元素设置相对定位 */
	position: relative;
}
.box_1{
	display: block;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}
复制代码

css3旋转

html结构：

<div class="box box_f2">
	<div class="box_s box_2"></div>
</div>
复制代码

css

.box_2{
	/* css3旋转 */
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
复制代码

外边距方式

html结构：

<div class="box box_f3">
	<div class="box_s box_3"></div>
</div>
复制代码

css:

.box_3{
	/* 外边距方式 */
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	margin-left: -5px;
	margin-top: -5px;
}
复制代码

弹性盒子 - 1

html结构：

<div class="box box_f4">
	<div class="box_s box_4"></div>
</div>
复制代码

css:

.box_f4{
	/* 弹性盒子1 -- 无需另外设置子元素 */
	display: flex;
	justify-content: center;
	align-items: center;
}
复制代码

弹性盒子 - 2

html结构：

<div class="box box_f5">
	<div class="box_s box_5"></div>
</div>
复制代码

css:

.box_f5{
	/* 弹性盒子2 - 需设置子元素 */
	display: flex;
}
.box_5{
	margin: auto;
}
复制代码

display：table

html结构：

<div class="box box_f6">
	<p class="box_6">niaho</p>
	<!-- <div class="box_s box_6"></div> -->
	<!--原本想看到跟前5种同样的效果，可是用一个方块不能实现，用文本能够-->
</div>
复制代码

css:

.box_f6{
	display: table;
	text-align: center;
	vertical-align: middle;
}
.box_6{
	display: table-cell;
	vertical-align: middle;
}复制代码