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;
}複製代碼