水平居中：行内元素解决方案

思路: 把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可：text-align: center

适用元素:文字，链接，及其它inline或者inline-*类型元素（inline-block，inline-table，inline-flex）

//父元素
display:block;
text-align: center;

水平居中：块状元素解决方案

思路: 对于块状元素（display:block）来说，我们需要将它的左右外边距（即，margin-left，margin-right）设置为auto，即可实现块状元素的居中.

适用元素:块状元素，如(div, p, section 等等元素），即display属性为block的元素

注意：需要居中的块元素需要有固定的宽度，否则无法实现居中，因为占据100%宽度

//子元素
margin: 0 auto;

水平居中：多个块状元素解决方案-inline-block+text-align

思路: 如果页面里有多个块状元素需要水平排列居中，可以将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可实现。

//父元素
text-align:center;
//子元素
display:inline-block;

水平居中：多个块状元素解决方案 -flex+justify-content

思路: 使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可

//父元素
display:flex;
justify-content: center;

垂直居中：单行的行内元素解决方案

思路: 当一个行内元素，即inline，inline-*类型的元素需要居中的话，可以将它的height和line-height同时设置为父元素的高度即可实现垂直居中效果。

//父元素
height: 200px;
//子元素
height: 200px;
line-height:200px;

垂直居中：多行的行内元素解决方案–table-cell+vertical-align

思路: 组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果

//父元素
display: table-cell;
vertical-align:middle;

垂直居中：已知高度的块状元素解决方案

思路:将待居中元素设置为绝对定位，并且设置margin-top为居中元素高度一半的负值

//子元素
margin-top: -50px;
position: absolute;

垂直居中：未知高度的块状元素解决方案-absolute+transform

思路:对于无法知道高度的元素，使用transform属性来垂直移动来实现垂直居中

//子元素
top: 50%;
position: absolute;
transform: translateY(-50%);

以下为水平垂直居中

DOM结构

<div id="parent">
       <div id="child">Text here</div>
</div>

1.Line Height

思路：给子节点设置一个大于font-size的line-height,通过text-align设置为center来实现垂直居中,这种方案仅支持单行的垂直居中，不支持多行的垂直居中。

<style type="text/css">
#parent {
        width: 400px;
        margin: 20px auto;
        background: #ccc;
}
#child {
        line-height: 200px;
        text-align: center;
}
</style>

2.CSS Tables

思路：设置父节点的display为table，设置子节点的display为table-cell，然后通过子节点的text-align为center来实现垂直居中，支持多行的垂直居中。

<style type="text/css">
#parent {
        width: 400px;
        background: #ccc;
        height: 200px;
        margin: 20px auto;
        display: table;
}
#child {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
}
</style>

3.Position and Margin

思路：把父节点的position设置为relative，子节点position设置为absolute，top和left设置为50%,然后通过设置margin-top和margin-left为元素高度一半的负值来调整垂直居中的具体位置，这种方案支持块状的节点的垂直居中，一般建议采用这种解决方案。

<style type="text/css">
#parent {
       position: relative;
       width: 400px;
       margin: 20px auto;
       background: #ccc;
       height: 200px;
}
#child {
       position: absolute;
       top: 50%;
       left: 50%;
       height:30%;
       width:50%;
       margin: -100px 0 0 -100px;
       text-align: center;
       background: #999;
}
</style>

4.Position and Margin(已知高度和宽度的元素解决方案)

思路：把父节点的position设置为relative，子节点的top, bottom, left, right都设置为0，因为子节点的宽度和高度都要比父节点小，所以呢，我们设置子节点的margin为auto就实现了垂直居中了，不过这种解决方案不支持IE7以下。

<style type="text/css">
#parent {
        position: relative;
        width: 400px;
        height: 200px;
        margin: 20px auto;
        background: #ccc;
}
#child {
       position: absolute;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       margin: auto;
       width: 50%;
       height: 30%;
       text-align: center;
       background: #999;
}
</style>

5.transform

思路：将设置元素绝对定位，并且设置transform的translate为Ｘ，Ｙ轴同时移动-50%即可

<style type="text/css">
.item{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

6.Padding

思路：主要是通过设置父节点的top和bottom 部分的padding来是的子节点居中，子节点的top和bottom 部分的padding来垂直居中子节点下面的内容。

<style type="text/css">
#parent {
        width: 400px;
        padding: 5% 0;
        margin: 20px auto;
        background: #ccc;
}
#child {
          padding: 10% 0;
          text-align: center;
          background: #999;
          color: #fff;
}
</style>

7.Float

思路：在父节点下面有一个空的div浮动节点，这个节点的高度设置为父节点的一半，在浮动节点下面是我们要垂直居中的节点（我们的目标节点），对这个节点进行清除浮动，这样目标节点就会紧贴在浮动节点后面，对浮动节点的margin-bottom设置一个目标节点高度一半的负数来使得目标节点垂直居中。

DOM结构如下：

<div id="parent">
  <div id="floater"></div>
  <div id="child">Content here</div>
</div>

CSS代码如下:

<style type="text/css">
  #parent {
    height: 250px;
    width: 400px;
    margin: 20px auto;
    background: #ccc;
  }
    #floater {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
    outline: 1px solid red;
  }
  #child {
    clear: both;
    height: 100px;
    outline: 1px solid yellow;
    text-align: center;
    background: #999;
    color: #fff;
  }
</style>

8.flex

思路：设置flex布局，并且定义居中元素的父元素justify-content和align-items属性为center即可

<style type="text/css">
.parent{
  display: flex;
  justify-content:center;
  align-items: center;  
  /* 注意这里需要设置高度来查看垂直居中效果 */
  background: #AAA;
  height: 300px;
}
</style>