在頁面布局中，居中在各種各樣的場景中廣泛被用到，也經(jīng)常被新人提及。以前做過一些自己探索居中問題的demo，今天翻出來了，正好做一下筆記，記錄一下。以后遇到問題也能快速方便快速找到。
居中包括水平居中和垂直居中兩種，其中水平居中相對來說容易解決，但是垂直居中有時就令人頭疼了，其實也不是很難。各自都有很多方式來實現(xiàn)，本文主要是總結一下自己以前的demo，并不代表主流方式。另外先打個預防針，下面的例子很丑，以前做的，勿噴。
水平居中
說到水平居中，你可能立馬想到的是text-align:center;或者margin:0 auto;這是最簡單的水平居中方式，也是使用很廣泛的水平居中方法。我們來探索一下，他倆居中能力到底有多強？
text-align:center水平居中
- 對直接文本子元素進行居中
<div style="width:200px;height:100px;background:#555;text-align:center">
利用text-align對本元素文字水平對齊
</div>
利用text-align對本元素文字水平對齊
- 對子div元素水平對齊
<div style="width:300px;height:300px;background:#555;text-align:center">
<div style="width:200px;height:100px;border:1px dotted blue;background:#f00;">
利用text-align對子div元素水平對齊
</div>
</div>
利用text-align對子div元素水平對齊
- 對子span元素水平對齊
<div style="width:300px;height:300px;background:#555;text-align:center">
<span style="background:#f00;">
利用text-align對子span元素水平對齊
</span>
</div>
利用text-align對子span元素水平對齊
- 對設置了inline的div元素水平對齊
<div style="width:300px;height:300px;background:#555;text-align:center">
<div style="display:inline;width:200px;height:100px;border:1px dotted blue;background:#f00;">
設置了inline的div元素水平對齊
</div>
</div>
設置了inline的div元素水平對齊
- 對設置了inline-block的div元素水平對齊
<div style="width:300px;height:300px;background:#555;text-align:center">
<div style="display:inline;width:200px;height:100px;border:1px dotted blue;background:#f00;">
設置了inline-block的div元素水平對齊
</div>
</div>
設置了inline-block的div元素水平對齊
小結
text-align:center具有繼承性，可以使文本元素以及子元素的文本水平居中，也可以使行內元素（或者設置了display:inline/inline-block屬性的塊狀元素）水平居中，但不能使塊狀元素居中。
margin:0 auto水平居中
- 對直接子元素進行水平居中
<div style="width:200px;height:100px;background:#555;margin: 0 auto;">
利用margin:0 auto對文字水平對齊
</div>
```
2. 對自身div元素水平對齊
````js
<div style="width:300px;height:300px;background:#555;">
<div style="width:200px;height:100px;border:1px dotted blue;background:#f00;margin: 0 auto;">
利用margin:0 auto對自身div元素水平對齊
</div>
</div>
```
3. 對自身div元素水平對齊,自身元素文本寬度未知
````js
<div style="width:300px;height:300px;background:#555;">
<div style="height:100px;border:1px dotted blue;background:#f00;margin: 0 auto;">
利用margin:0 auto對自身div元素水平對齊,自身元素文本寬度未知
</div>
</div>
```
4. 對自身span元素水平對齊
````js
<div style="width:300px;height:300px;background:#555;">
<span style="background:#f00;margin: 0 auto;">
對自身span元素水平對齊
</span>
</div>
```
5. 對設置了block的span元素水平對齊
````js
<div style="width:300px;height:300px;background:#555;">
<span style="width:200px;height:100px;display:block;background:#f00;margin: 0 auto;">
設置了block的span元素水平對齊
</span>
</div>
```
6. 對設置inline的div元素水平對齊
````js
<div style="width:300px;height:300px;background:#555;">
<div style="display:inline;height:100px;border:1px dotted blue;background:#f00;margin: 0 auto;">
設置inline的div元素水平對齊
</div>
</div>
```
7. 對設置inline-block的div元素水平對齊
````js
<div style="width:500px;height:300px;background:#555;">
<div style="display:inline;height:100px;border:1px dotted blue;background:#f00;margin: 0 auto;">
設置inline-block的div元素水平對齊
</div>
</div>
```
**小結**
**margin:0 auto;**沒有繼承性，只能使已知寬度的塊狀元素水平居中，且該塊狀元素為其本身。
除了以上``margin:0 auto;``水平居中方式之外還有可以使用postion配合margin或者transform來實現(xiàn)塊狀盒子水平居中的目的。
## position配合margin或者transform水平居中
1. 對已知寬度的div元素盒子水平對齊
````js
<div style="width:600px;height:300px;background:#555;position:relative">
<div style="width:100px;height:100px;background:#f00;position:absolute;left:300px;margin-left:-50px">
對已知寬度的div元素盒子水平對齊
</div>
</div>
```
2. 對未知寬度的div元素盒子水平對齊
````js
<div style="width:600px;height:300px;background:#555;position:relative">
<div style="background:#f00;position:absolute;left:300px;transform: translate(-50%,0);">
對未知寬度的div元素盒子水平對齊
</div>
</div>
```
**小節(jié)**
這種方式的水平居中，既可以是父元素**已知寬度**，也可以是父元素**未知寬度**，分別對應margin和transform。
# 垂直居中
## line-height 垂直居中
垂直居中時間很麻煩的事情，我們知道可以使用``line-height=height``可以使單行文本在父元素內垂直居中，這個很容易實現(xiàn)。
```js
<div style="width:500px;height:100px;background:#555;line-height:100px">
利用line-height=height對單行文本在父元素內垂直居中
</div>
```
那么``line-height=height;``能不能使其他元素水平居中呢？我們來試一試：
1. 對子div元素盒子垂直對齊
````js
<div style="width:600px;height:300px;background:#555;line-height:300px">
<div style="width:500px;height:100px;background:#f00;">
利用line-height=height對div元素盒子垂直對齊
</div>
</div>
```
2. 對子span元素盒子垂直對齊
````js
<div style="width:600px;height:300px;background:#555;line-height:300px">
<span style="background:#f00;">
利用line-height=height對子span元素盒子垂直對齊
</span>
</div>
```
3. 設置了inline的div元素盒子垂直對齊
````js
<div style="width:600px;height:300px;background:#555;line-height:300px">
<div style="background:#f00;display:inline">
設置了inline的div元素盒子垂直對齊
</div>
</div>
```
4. 設置了inline-block的div元素盒子垂直對齊
````js
<div style="width:600px;height:300px;background:#555;line-height:300px">
<div style="background:#f00;display:inline-block">
設置了inline-block的div元素盒子垂直對齊
</div>
</div>
```
**小結**
**line-weight:height**具有繼承性，可以使文本元素以及子元素的文本垂直居中，也可以使行內元素（或者設置了display:inline屬性的塊狀元素）垂直居中，但不能使塊狀元素（或設置了display：inline-block屬性的塊狀元素）居中。
## position配合margin或者transform
1. 對已知高度div元素盒子垂直對齊
````js
<div style="width:600px;height:300px;background:#555;position:relative">
<div style="width:100px;height:100px;background:#f00;position:absolute;top:50%;margin-top:-50px">
利用position對已知高度div元素盒子垂直對齊
</div>
</div>
```
2. 對未知高度span元素盒子垂直對齊
````js
<div style="width:600px;height:300px;background:#555;position:relative">
<span style="background:#f00;position:absolute;top:50%;transform: translate(0,-50%);">
利用position對未知高度span元素盒子垂直對齊
</span>
</div>
```
**小結**
同樣，利用很牛X的position配合margin或者transform來使已知高度或者未知高度的元素進行垂直居中。
# 垂直水平居中
垂直水平居中就是對上面兩種居中方式的綜合利用，不在解釋，直接上例子：
1. 對已知寬高的div元素盒子垂直水平對齊
````js
<div style="width:600px;height:300px;background:#555;position:relative">
<div style="width:100px;height:100px;background:#f00;position:absolute;left:50%;top:50%;margin-left:-50px;margin-top:-50px">
利用position和margin對已知寬高的div元素盒子垂直水平對齊
</div>
</div>
```
2. 對未知寬高div元素盒子垂直水平對齊
````js
<div style="width:600px;height:300px;background:#555;position:relative">
<div style="background:#f00;position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);">
利用position和margin對未知寬高div元素盒子垂直水平對齊
</div>
</div>
```
3. 利用left:0;top:0;bottom:0;right:0;margin:auto對盒子垂直水平對齊
````js
<div style="width:600px;height:300px;background:#555;position:relative">
<div style="width: 200px;height:100px;background:#f00;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto">
利用left:0;top:0;bottom:0;right:0;margin:auto對盒子垂直水平對齊
</div>
</div>
```
4. 利用display:table-cell;vertical-align:middle;text-align:center;對inline-block盒子垂直水平對齊
````js
<div style="width:600px;height:300px;background:#555;display:table-cell;vertical-align:middle;text-align:center">
<div style="width: 200px;height:100px;background:#f00;vertical-align:middle;display:inline-block">
利用display:table-cell;vertical-align:middle;text-align:center;對inline-block盒子垂直水平對齊
</div>
</div>
```
