如何使用CSS做出：

• 左右布局/左中右布局
• 水平居中
• 垂直居中

左右布局/左中右布局

在此提供兩種實現(xiàn)方法，實際操作中推薦使用第二種：

方法一：設(shè)置每個塊級元素的display屬性為inline-block，同時必須設(shè)置該元素的vertical-align屬性為top。再給父元素加入text-align: center;可實現(xiàn)塊狀子元素水平居中。

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

演示
方法二：設(shè)置所有子元素添加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;
}

演示

水平居中

• 內(nèi)聯(lián)元素水平居中

將內(nèi)聯(lián)元素外部的塊級元素的text-align設(shè)置為center，即可實現(xiàn)內(nèi)聯(lián)元素（inline、inline-block）的水平居中，可設(shè)置內(nèi)聯(lián)元素的行高line-height控制內(nèi)聯(lián)元素所占高度。
html：

<div>
  <span>水平居中</span>
</div>

css：

div{
  text-align: center;
  border: 2px dashed orange;
  text-align: center;
}

span{
  line-height: 50px;
}

演示
內(nèi)聯(lián)元素列表：
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

內(nèi)聯(lián)元素的margin只能控制左右邊距

• 塊級元素水平居中

將固定寬度的塊級元素的margin-left和margin-right設(shè)置為auto，即可實現(xiàn)塊級元素的水平居中。

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設(shè)置為inline-block，然后將它們的父容器的text-align設(shè)置為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;
}

演示

垂直居中

• 內(nèi)聯(lián)元素垂直居中

設(shè)置內(nèi)聯(lián)元素的行高（line-heigt）和內(nèi)聯(lián)元素的父元素的高度（height）相等，且內(nèi)聯(lián)元素的字體大小遠小于行高，即可使內(nèi)聯(lián)元素垂直居中。
html：

<div class="parent">
  <span>垂直居中</span>
</div>

css：

.parent{
  border: 2px dashed orange;
  height: 80px;
}
span{
  font-size: 30px;
  line-height: 80px;
}

演示

• 塊級元素垂直居中

1、固定高度的塊級元素
通過絕對定位元素距離頂部50%，并設(shè)置margin-top向上偏移元素高度的一半，即可實現(xiàn)垂直居中。
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%的方法實現(xiàn)垂直居中

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

演示