在页面布局中，居中在各种各样的场景中广泛被用到，也经常被新人提及。以前做过一些自己探索居中问题的demo，今天翻出来了，正好做一下笔记，记录一下。以后遇到问题也能快速方便快速找到。
居中包括水平居中和垂直居中两种，其中水平居中相对来说容易解决，但是垂直居中有时就令人头疼了，其实也不是很难。各自都有很多方式来实现，本文主要是总结一下自己以前的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来实现块状盒子水平居中的目的。
## 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>
```
**小节**
这种方式的水平居中，既可以是父元素**已知宽度**，也可以是父元素**未知宽度**，分别对应margin和transform。
# 垂直居中
## line-height 垂直居中
垂直居中时间很麻烦的事情，我们知道可以使用``line-height=height``可以使单行文本在父元素内垂直居中，这个很容易实现。
```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>
```
