很多人刚学CSS的时候可能会觉得它很简单，心想不就是一个“背”字吗，把这些样式全记下不就行了吗？其实你一段时间之后就会明白，背是远远不够的，你需要弄清每一个属性的不同值分别得到什么效果，几个属性的组合又会带来什么结果，只有由内而外地理解这些属性，才能找到最便捷的方法达到你想要的效果，理解不是背出来的，是无数次的实践和踩坑得到的。

CSS居中是每次布局都需要面对的问题，我也是踩了无数次的坑才得出一点感悟和经验，今天我就对它做个总结，我相信一个全面的总结会对以后的学习和实践带来很大的帮助。

内联元素

内联元素的特点

和其他元素都在一行上
设置高度height 无效，可以通过line-height来设置
设置margin和padding只有左右有效，上下无效
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

以下实例都是基于下面的html代码：

<div class="out">
    <span class="in">
        居中元素
    </span>
</div>

水平居中

父元素样式设置为text-align:center，里面包含的行内元素居中,如果父元素内部还存在包含文字且不定宽的块元素，那么这个块元素也会居中。
```
.out{
   text-align: center;
  }
```
父元素样式设置为display:flex; justify-content:center，里面包含的行内元素居中。
```
.out{
    display:flex;
    justify-content:center
}   
```

垂直居中

单行文本：可将其父元素的高度和行高设置为相等的值 height = line-height
```
.out{
   height: 100px;
   line-height: 100px;
}
```
多行文本：用一个span标签将所有的文字封装起来，再用一个容器包裹span，设置属性display: table-cell;vertical-align: middle。这种方法同样适用于使图片居中。
```
.out{
    display: table-cell;
    vertical-align: middle;
 }
```
父元素样式设置为display:flex; align-items: center，里面包含的行内元素居中。
```
.out{
    display:flex;
    align-items: center;
}   
```

块级元素

块级元素的特点

总是在新行上开始，占据一整行
高度，行高以及外边距和内边距都可控制
宽度缺省是它的容器的100%，除非设定一个宽度
它可以容纳内联元素和其他块元素

以下实例都基于下面的html代码：

<div class="out">
    <div class="in">
        居中元素
    </div>
</div>

水平居中

定宽块级元素水平居中

父元素样式设置为display:flex; justify-content:center，则里面包含的块元素居中
```
  .out{
    display:flex;    
    justify-content:center;
}  
```

该元素样式设置为 margin：0 auto；

  .in{
    width: 100px;  
    margin: 0 auto;
}

该元素样式设置为 position: relative;left: 50%；margin-left: -0.5*width（负的该元素宽度的一半）
```
  .in{
    width: 100px;
    position: relative;
    left: 50%;
    margin-left: -50px;
}
```
上述方法把relative改为absolute也同样适用，根据实际情况选择适合自己的方法。
```
   .in{
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}
```

不定宽块级元素水平居中

对于包含文字的块元素可将其父元素设置为text-align:center
```
.out{
      text-align:center;    
}
```
若不包含文字，可把该块级元素变成行内元素，即设置display:inine，再给其父元素设置text-align:center
```
.out{
      text-align:center;    
}
.in{
      display:inine;    
}
```
父元素样式设置为display:flex; justify-content:center，则里面包含的块元素居中
```
.out{
   display:flex;    
   justify-content:center;
}
```

该元素样式设置为 position: absolute;left: 50%;transform: translate(-50%,0)

.in{
      position: absolute; 
   left: 50%;  
   transform: translate(-50%,0);
}

垂直居中

定高块级元素垂直居中

父元素样式设置为display:flex; align-items: center，则里面包含的块元素居中
```
.out{
    display:flex; 
    align-items: center;
}
```
该元素样式设置为 position: relative;top: 50%；margin-top: -0.5*height（负的该元素高度的一半）
```
.in{
   height:100px;
      position: relative; 
   top: 50%;  
   margin-top:-50px;
}
```

该元素的父元素的position值设置为relative，将该元素样式设置为position: absolute;top:50%;margin-top: -0.5*height

.out{
     position: relative;    
  }
   .in{
     height:100px;
     position: absolute; 
     top:50%;   
     margin-top: -50px
  }

该元素的父元素的position值设置为relative，将该元素样式设置为position: absolute;top:0;bottom: 0;left: 0;right: 0;margin: auto;

.out{
    position: relative;    
 }
.in{
    height:100px;
    position: absolute; 
    top:0;   
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
 }

不定高块级元素垂直居中

父元素样式设置为display:flex; align-items: center，则里面包含的块元素居中
```
.out{
    display:flex; 
    align-items: center;
}
```
该元素样式设置为 position: relative;top: 50%;transform: translate(0,-50%)
```
.in{
    position: relative;
    top: 50%;
    transform: translate(0,-50%);
}
```
该元素的父元素的position值设置为relative，将该元素样式设置为position: absolute;top:50%;translate(0,-50%)
```
.out{
     position: relative;
   }
.in{
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
  }
```

小结

总结到这里就会发现令元素居中的办法千奇百怪，其中无论水平还是垂直，无论有没有指定宽高，总能奏效的办法就是display:flex办法，这也是flex布局的优势之一，有时候使用flex布局甚至比bootstrap这种框架更加顺手，有机会我也会对flex做个总结。
另外在上面的很多居中的办法中都用到了position: absolute，但是其实不建议经常使用绝对定位进行布局，因为它脱离了文档流，有时会造成元素的塌陷。因为关于position的不同取值带来的效果经常使人困扰，后面我也会对它进行总结。
还有，居中的办法有这么多，但并不代表你需要懂得每一种，甚至去学会一些奇怪或者复杂的居中方式，而是在布局的过程中选择最适合、最简单、你用的最顺手的方法实现你想要的效果，俗话说黑猫白猫，能抓住耗子的就是好猫，居中方式也是一样的道理。