1.Flexbox布局：
display:flex;
justify-content:center;
align-items:center;
100%;
2.Bootstrap栅格布局
一共12格，分成3块，每块占4列。居中的内容写在中间的那一块。
3.圣杯/双飞翼（水平自适应居中的基础上）
第一步：居中的div写在最前面，100%撑满一整行。三个div都向左浮动float:left;
<div class="main">Main</div>
<div class="left">Left</div>
<div class="right">Right</div>
第二步：让三个div显示在同一行
div.left { marin-left:100%}
div.right{ marin-left:自身的宽度}
第三步：让中间的div能够自适应
圣杯布局的做法：
div.main{
padding-left:左div的宽度；
padding-right:右div的宽度；
}
双飞翼布局的做法：
在div.main内部再添加一个div.mc：
然后设置div.mc的margin值
margin-left:左div的宽度；
margin-right:右div的宽度；
现在，水平居中已经实现了；
第四步：垂直居中
在div.left,div.right,div.main外面再加一个div.wrap,
然后对div.con设置 display:table,对div.wrap设置
display:table-cell;
vertical-align:middle;
4.relative/positive + top/left+tarnsform
父元素：
position:relative
子元素：
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);意思是向右移动自身50%的宽度，向下移动自身50%的高度。
为什么有了top:50%;left:50%还要 transform: translate(-50%, -50%);
最初：
加了top:50%;left:50%后：
还需要再往左、往上挪一挪：
5.relative/positive + top/left+left + margin
和方法4一样，用top和left挪到中间：
这之后用margin-left和margin-right进行处理：
先给div.child设置宽度，然后设置margin：
6.用top,left,bottom,right
计算公式：
top + div.child 的 height +bottom = div.parent 的 height
left + div.child 的 width +right = div.parent 的 width
如果子元素是行内元素，如<p>,要注意一开始就要去掉margin和padding
方法4、5、6有的demo，详见 github