在页面布局中，居中在各种各样的场景中广泛被用到，也经常被新人提及。以前做过一些自己探索居中问题的demo，今天翻出来了，正好做一下笔记，记录一下。以后遇到问题也能快速方便快速找到。

居中包括水平居中和垂直居中两种，其中水平居中相对来说容易解决，但是垂直居中有时就令人头疼了，其实也不是很难。各自都有很多方式来实现，本文主要是总结一下自己以前的demo，并不代表主流方式。另外先打个预防针，下面的例子很丑，以前做的，勿喷。

水平居中

说到水平居中，你可能立马想到的是text-align:center;或者margin:0 auto;这是最简单的水平居中方式，也是使用很广泛的水平居中方法。我们来探索一下，他俩居中能力到底有多强？

text-align:center水平居中

1. 对直接文本子元素进行居中

<div style="width:200px;height:100px;background:#555;text-align:center">
      利用text-align对本元素文字水平对齐
</div>

利用text-align对子div元素水平对齐

3. 对子span元素水平对齐

<div style="width:300px;height:300px;background:#555;text-align:center">
    <span style="background:#f00;">
      利用text-align对子span元素水平对齐
    </span>
</div>

利用text-align对子span元素水平对齐

4. 对设置了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元素水平对齐

5. 对设置了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水平居中

1. 对直接子元素进行水平居中

<div style="width:200px;height:100px;background:#555;margin: 0 auto;">
      利用margin:0 auto对文字水平对齐
</div>
```
![利用margin:0 auto对文字水平对齐](http:https://img.haomeiwen.com/i3333422/e024b77af14c68d7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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>
```
![利用margin:0 auto对自身div元素水平对齐](http:https://img.haomeiwen.com/i3333422/0aeeb6285400439e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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>
```
![对自身div元素水平对齐,自身元素文本宽度未知](http:https://img.haomeiwen.com/i3333422/4262e5e2bc813d7d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

4. 对自身span元素水平对齐
````js
<div style="width:300px;height:300px;background:#555;">
    <span style="background:#f00;margin: 0 auto;">
      对自身span元素水平对齐
    </span>
</div>
```
![利用margin:0 auto对自身span元素水平对齐](http:https://img.haomeiwen.com/i3333422/c659aa53b5d784d7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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>
```
![利用margin:0 auto对设置了block的span元素水平对齐](http:https://img.haomeiwen.com/i3333422/3344f9996116c7f3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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>
```
![利用margin:0 auto对设置inline的div元素水平对齐](http:https://img.haomeiwen.com/i3333422/8ada6d29b7c082d8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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对设置inline-block的div元素水平对齐](http:https://img.haomeiwen.com/i3333422/19ce1f22a18f7168.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**小结**

**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>
```
![对已知宽度的div元素盒子水平对齐](http:https://img.haomeiwen.com/i3333422/a9cdc8eb0aeeb018.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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>
```
![对未知宽度的div元素盒子水平对齐](http:https://img.haomeiwen.com/i3333422/87a309a9999e9c42.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**小节**
这种方式的水平居中，既可以是父元素**已知宽度**，也可以是父元素**未知宽度**，分别对应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对单行文本在父元素内垂直居中](http:https://img.haomeiwen.com/i3333422/afb7b420d8fffbca.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

那么``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>
```
![ 利用line-height=height对div元素盒子垂直对齐](http:https://img.haomeiwen.com/i3333422/60dcf2f73e8253eb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2. 对子span元素盒子垂直对齐
````js
<div style="width:600px;height:300px;background:#555;line-height:300px">
    <span style="background:#f00;">
      利用line-height=height对子span元素盒子垂直对齐
    </span>
</div>
```
![ 利用line-height=height对子span元素盒子垂直对齐](http:https://img.haomeiwen.com/i3333422/488e64e14f3706bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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>
```
![ 利用line-height=height对设置了inline的div元素盒子垂直对齐](http:https://img.haomeiwen.com/i3333422/58e51cc06ec408a8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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-height=height对设置了inline-block的div元素盒子垂直对齐](http:https://img.haomeiwen.com/i3333422/5a662f326a0178dd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**小结**
**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>
```
![ 利用position对已知高度div元素盒子垂直对齐](http:https://img.haomeiwen.com/i3333422/b7b3fa3ec1d6e5ad.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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>
```
![ 利用position对未知高度span元素盒子垂直对齐](http:https://img.haomeiwen.com/i3333422/ed91b2dc1cc6b49a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

**小结**
同样，利用很牛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>
```
![ 对已知宽高的div元素盒子垂直水平对齐](http:https://img.haomeiwen.com/i3333422/a5f923b5a4de7e65.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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>
```
![ 对未知宽高div元素盒子垂直水平对齐](http:https://img.haomeiwen.com/i3333422/cc1769665725f99f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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>
```
![ 利用left:0;top:0;bottom:0;right:0;margin:auto对盒子垂直水平对齐](http:https://img.haomeiwen.com/i3333422/6fe71129eaec73c3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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>
```
![ 利用display:table-cell;vertical-align:middle;text-align:center;对inline-block盒子垂直水平对齐](http:https://img.haomeiwen.com/i3333422/e4d59f57ec32bb03.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)