如何使用CSS做出：
- 左右布局/左中右布局
- 水平居中
- 垂直居中
左右布局/左中右布局
在此提供两种实现方法，实际操作中推荐使用第二种：
方法一：设置每个块级元素的display属性为inline-block，同时必须设置该元素的vertical-align属性为top。再给父元素加入text-align: center;可实现块状子元素水平居中。
html：
<div class="parent">
<div class="child">元素1</div>
<div class="child">元素2</div>
<div class="child">元素3</div>
</div>
css:
.parent{
text-align: center;
}
.child{
display:inline-block;
vertical-align:top;
}
演示
方法二：设置所有子元素添加float: left，同时给父元素加 clearfix 类，清除浮动，不加clearfix 类会出bug
html：
<div class="parent clearfix">
<div class="child">元素1</div>
<div class="child">元素2</div>
<div class="child">元素3</div>
</div>
css：
.child{
float: left;
}
.clearfix::after {
display: block;
content: '';
clear: both;
}
水平居中
-
内联元素水平居中
将内联元素外部的块级元素的text-align设置为center，即可实现内联元素（inline、inline-block）的水平居中，可设置内联元素的行高line-height控制内联元素所占高度。
html：
<div>
<span>水平居中</span>
</div>
css：
div{
text-align: center;
border: 2px dashed orange;
text-align: center;
}
span{
line-height: 50px;
}
演示
内联元素列表：
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
内联元素的margin只能控制左右边距
-
块级元素水平居中
将固定宽度的块级元素的margin-left和margin-right设置为auto，即可实现块级元素的水平居中。
html：
<div>
<div class="center">水平居中</div>
</div>
css：
div{
border: 1px dashed orange;
text-align: center;
height: 50px;
}
.center{
background: orange;
height: 30px;
width: 80px;
margin:0 auto;
}
-
多个块级元素水平居中
将每个块级元素的display设置为inline-block，然后将它们的父容器的text-align设置为center，即可使多个块级元素水平居中。
html：
<div class="parent">
<div class="child">块级元素1</div>
<div class="child">块级元素2</div>
<div class="child">块级元素3</div>
<div class="child">块级元素4</div>
</div>
css：
.child{
display: inline-block;
}
.parent{
border: 2px dashed orange;
text-align: center;
height: 60px;
}
垂直居中
-
内联元素垂直居中
设置内联元素的行高（line-heigt）和内联元素的父元素的高度（height）相等，且内联元素的字体大小远小于行高，即可使内联元素垂直居中。
html：
<div class="parent">
<span>垂直居中</span>
</div>
css：
.parent{
border: 2px dashed orange;
height: 80px;
}
span{
font-size: 30px;
line-height: 80px;
}
-
块级元素垂直居中
1、固定高度的块级元素
通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，即可实现垂直居中。
html：
<div class="parent">
<div class="child">固定高度垂直居中</div>
</div>
css：
.parent {
height: 140px;
position: relative;
border: 2px dashed orange;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
background: orange;
}
2、未知高度的块级元素
借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中
html：
<div class="parent">
<div class="child">未知高度垂直居中</div>
</div>
css：
.parent {
height: 140px;
position: relative;
border: 2px dashed orange;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: orange;
}
