CSS中的居中，在工作中，會經常遇到。它可以分為水平居中和垂直居中，以下是幾種實現居中的方式。
git 查看源碼
配合在線預覽，效果更佳
以下例子中，涉及到的CSS屬性值。
.parent-frame {
width: 200px;
height: 200px;
border: 1px solid red;
}
.child-frame {
width: 100px;
height: 100px;
border: 1px dotted blue;
}
1: text-align:center，水平居中
塊狀元素，水平居中
<div class="parent-frame">
子元素水平居中
<i style="display:block; text-align: center;color: blue">塊狀元素，水平居中</i>
</div>
子元素水平居中
塊狀元素，水平居中
2：margin: 0 auto，水平居中
水平居中。上下外邊框距為0，左右外邊距瀏覽器會自動計算平分
<div class="parent-frame">
子元素水平居中
<i class="child-frame" style="display: block;margin: 0 auto">塊狀元素，水平居中</i>
</div>
子元素水平居中
塊狀元素，水平居中
## 3：line-height值，垂直居中
垂直居中。line-height屬性，設置行間的距離（行高）。不允許使用負值。
單行文本的元素才適用，多行元素中不適用這種方法。元素內容是單行，並且其高度是固定不變的，
<div class="parent-frame">
<div style="line-height: 200px;">line-height值=父height值</div>
</div>
line-height值=父height值
給父元素設置float，然后將父元素整體向右移動50%，再將子元素整體向左移動50%，來實現水平居中。
記得將父元素清除浮動。
<div class="parent-frame">
<div style="float: left; position: relative; left: 50%; clear: both;" >
<div style="position: relative; left: -50%">雖然寬度不同weiqinl</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">但一樣</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">水平居中了</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">使用float屬性，記得清楚浮動</div>
</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">雖然寬度不同weiqinl</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">但一樣</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">水平居中了</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">使用float屬性，記得清楚浮動</div>
</div>
5：使用table布局，默認垂直居中
table默認垂直居中vertical-align:middle。如果還想要水平居中，那就是行內元素，添加屬性text-align: center
<table class="parent-frame">
<tr>
<td>
table默認垂直居中[vertical-align: middle]
</td>
<td style="text-align:center;">
水平居中添加text-align:center
</td>
</tr>
</table>
<tr>
<td>
table默認垂直居中[vertical-align: middle]
</td>
<td style="text-align:center;">
水平居中添加text-align:center
</td>
</tr>
6: 仿table，display:table-cell。並使用vertical-align屬性,實現垂直居中
該屬性設置元素的垂直對齊方式。
定義行內元素的基線相對於該元素所在行的基線的垂直對齊。在表單元格中，這個屬性會設置單元格框中的單元格的對齊方式。
<div class="parent-frame" style="display: table-cell;vertical-align: middle">
仿table: display:table-cell垂直居中vertical-align:middle
</div>
仿table: display:table-cell垂直居中vertical-align:middle
7: 使用absolute絕對定位，配合margin使用，實現水平垂直居中
相對應於relative的絕對定位absolute，需要定寬。同時，top/bottom應該相等，並且相加不超過定寬度。 right/left也應該相等，並且相加不超過定寬。
再配合margin： auto使用
<div class="parent-frame" style="position: relative">
利用絕對定位，配合margin:auto自動計算外邊距。
<div class="child-frame" style="position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;">
定寬元素,需要確定的尺寸。relative是為了給子元素定位用。
</div>
</div>
利用絕對定位，配合margin:auto自動計算外邊距。
<div style="width:100px; height:100px; border: 1px dotted blue;position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;">
定寬元素,需要確定的尺寸。relative是為了給子元素定位用。
</div>
8: 使用absolute絕對定位，配合margin的負值(negative margins)來實現水平垂直居中。
negative margins負邊距，會使結構塌陷，利用這個特點來實現。
<div class="parent-frame" style="position: relative;">
利用絕對定位，配合margin的負值來實現居中。
<div class="child-frame" style="position: absolute; top: 50%; left: 50%; margin-top: -51px; margin-left: -51px;">
負邊距來實現，水平垂直居中。需要知道該元素的具體大小
</div>
</div>
利用絕對定位，配合margin的負值來實現居中。
<div style="width:100px; height:100px; border: 1px dotted blue;position: absolute; top: 50%; left: 50%; margin-top: -51px; margin-left: -51px;">
負邊距來實現，水平垂直居中。需要知道該元素的具體大小
</div>
9: 使用absolute絕對定位，配合translate 移動轉換，實現水平垂直居中
使用百分比來絕對定位一個元素，並配合使用translate，將元素移動定位居中。
<div class="parent-frame" style="position: relative;">
利用絕對定位，配合translate移動到水平垂直居中。
<div class="child-frame" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
不需知具體大小。支持IE9+及現代瀏覽器
</div>
</div>
利用絕對定位，配合translate移動到水平垂直居中。
<div style="width:100px; height:100px; border: 1px dotted blue;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
不需知具體大小。支持IE9+及現代瀏覽器
</div>
10： 使用flex布局,設置其屬性justify-content，align-items都為center，實現水平垂直居中
父元素使用flex布局,並定義兩個屬性值justify-content，align-items都為center，那么就定義為水平垂直居中
justify-content屬性定義了項目在主軸上的對齊方式。align-items屬性定義項目在交叉軸上如何對齊。
<div class="parent-frame" style="display: flex; justify-content: center; align-items: center">
<div class="child-frame">使用flex布局，justify-content屬性定義了項目在主軸上的對齊方式。</div>
<div class="child-frame">
align-items屬性定義項目在交叉軸上如何對齊。 兩個屬性都居中，則水平、垂直居中對齊
</div>
</div>
使用flex布局，justify-content屬性定義了項目在主軸上的對齊方式。
align-items屬性定義項目在交叉軸上如何對齊。 兩個屬性都居中，則水平、垂直居中對齊
11: 利用flex布局，配合margin：auto使用，實現水平垂直居中。
父元素使用flex布局，子元素使用margin: auto
<div class="parent-frame" style="display: flex;">
<div style=" margin: auto;">父元素使用flex布局，子元素配合margin:auto使用</div>
</div>
<div style=" margin: auto;">父元素使用flex布局，子元素配合margin:auto使用</div>
[完]