如何使用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;
}
