web网页中各种margin布局居中效果 水平居中 垂直居中 水平垂直居中

页面中元素居中效果分为三种情况，1.水平居中，2.垂直居中，3.水平垂直居中

下面代码视图层统一代码结构：

<div class="father">
	<div class="son"></div>
</div>

1.水平居中：

应用场景：整体网站居中，文字排版居中

css代码：

.father{
	width: 100%;
}
.son{
	width:800px;
	height: 60px;
	background: #ccc;
	margin: auto;
}

2.垂直居中：

css代码：

.father{
	width: 100%;
	height:300px;
	writing-mode: vertical-lr;
	background: orange;
}
.son{
	width:80%;
	height: 100px;
	background: #f2f2f2;
	margin: auto;
}

3.水平居中：

.father{
	position:absolute;
	top: 0;left: 0;bottom: 0;right: 0;
	background: rgba(0,0,0,.5);
}
.son{
	position: absolute;
	top: 0;left: 0;bottom: 0;right: 0;
	width:300px;
	height: 300px;
	background: #f2f2f2;
	margin: auto;
}