空闲总结了下水平垂直居中方案，欢迎补充：
水平居中
水平居中有两种情况:
-
子元素是内联元素
这种那个情况下只需要在父元素定义: text-align:center;
例子:
html://省略了body,html
<div class="out-div">
hello world
</div>
<div class="out-div">
<span>
same for a inline tag
</span>
</div>css:
.out-div{
height: 100px;
background: blueviolet;
text-align: center;
border:1px solid black;
}这里注意到out-div 并没有是设置水平宽度，然而其width依然占满了屏幕，这点在定宽块状元素的水平居中会谈。
-
子元素是块状元素
-
子素的width确定，也就是定宽情况，只需要设置margin: auto;即可
例子:
html:<div class="block-out-div">
<div class="block-div"> </div>
</div>css:
.block-out-div
{
height: 100px;
background: gold;
margin:auto; //重点
}
.block-div{
width: 50px;
height: 50px;
background: #cccccc;
}原理： “正常流中的块级元素框的水平总和就等于父元素的width”(from css权威指南),这就是所谓块状元素正常情况下独占一行，一就是上面的div没设置width默认占满父元素的宽度。”在水平格式化的“7大属性”中，只有3个可以设置为auto: width, margin-left, margin-right”(from css权威指南),这七个值分别是 margin-left,border-left-width,padding-left,width,padding-right,border-right-width,margin-right
.默认情况下这七个值应该等于父元素宽度. -
子元素宽度不确定
这种情况下比较麻烦，但是解决方案有几种:
1.利用table-cell原理，什么意思呢，table标签是特殊的标签，他会根据内容来确定自己宽度，所以在需要居中的内容里面套上一套table即可,相当套了一个定宽的块状元素，然后给这个table设置margin:auto即可
具体示例如下:<div class="block-out-div">
<table class="table-wrap">
<tr>
<td>
<div class="no-width-box">
宽度不确定
</div>
</td>
</tr>
</table>
</div>只需设置table,css:
.table-wrap{
margin: auto;
}这种做法缺点是增加了标签，破坏了语义化
2.第二种简单的方式是直接给需要设置居中子元素设置：display:inline-block;使得子元素拥有内联元素的特性，这时候为父元素设置：text-align:center;就可以居中了.
例子：
html:<div class="block-out-div">
<div class="no-width-box">
宽度不确定
</div>
</div>css:
.block-out-div
{
height: 100px;
background: gold;
border: 1px solid black;
text-align: center;
}
.no-width-box{
display: inline-block;
}3.运用脱离文档流的方式，先给父元素设置position:relative;和left:50%;相当于把父元素整个移动百分五十%，但是对于子元素而已，他的整个应该是在父元素的中分线右边，这个时候对子元素设置rposition:relative;和left:-50%;就可以居中了。这里需要注意一点是relative 设置定位是不会脱离文档流的，他本身位置并没有变，可以理解视觉上的变化，这种情况下很可能会影响到别的元素，通过设置父元素float:left;来解决.
例子：
html，我一样用上面的html代码，改下css:<div class="block-out-div">
<div class="no-width-box">
宽度不确定
</div>
</div>css:
.block-out-div
{
height: 100px;
background: gold;
border: 1px solid black;
float: left;
position: relative;
left: 50%;
}
.no-width-box{
position: relative;
left: -50%;
} display: inline-block;这种方式需要注意的是父元素已经脱离了文档流，已经脱离了文档流。
-
垂直居中
-
单行文本
这种情况不管子元素是内联还是块状，只要父元素高度确定，设置height的值和line-height值相同就可以垂直居中.
例子:
html:<div class="out-div">
hello world
</div>css:
.out-div{
height: 100px;
background: blueviolet;
border:1px solid black;
line-height: 100px;
} -
多行文本
对于有多个元素需要居中的情况，有几种解决方案:
1.table-cell,套上table标签，包括tr,td,设置table高度和父元素高度一样即可
html:<div class="block-out-div">
<table>
<tr>
<td>
<div>
宽度不确定
</div>
<div>
宽度不确定
</div>
</td>
</tr>
</table>
</div>css:
table{
height: 100px;
}
.block-out-div
{
height: 100px;
border: 1px solid black;
}这种方式原理是利用vertical-align:middle;这个属性设置对table类的标签的子元素居中，也就是display:table-cell的元素有效;当然也可以显示设置别的元素为table-cell,而且默认的table-cell元素，vertical-align为middle，所以，只要设置了display就行了。
还有别的方式：比如可以通过设置position属性等.
h5 弹性盒子布局中
这个时候用flex,实现水平垂直居中变得很容易.
例子:
<div class="contianer">
<div class="child">
flex
</div>
</div>
css:
.contianer{
height: 100px;
display: flex;
justify-content: center; //水平居中
align-items: center; //垂直居中
}