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