单行居中
div{
height: 26px;
line-height: 26px;
overflow: hidden;
text-align:center;
}
1. 同时支持块级和内联极元素
2. 只能支持单行垂直居中，并且不支持标签
多行居中
div{
padding: 10px 0;
text-align:center;
}
1. 同时支持块级和内联极元素
2. 支持非文本标签，但不能设定容器的高度
绝对定位居中
div{
margin: auto;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
/**可以设定高度、宽度**/
}
1.毫无疑问，绝对定位居中是本人最喜欢、使用次数最多的居中方式。通过设定position为absolute，将使div脱离文档流，left、top、right、bottom设置为0，使目标盒填充其父元素的所有可用空间，父元素一般为body，或者position设置为relative的容器。设置高度或宽度后，margin： auto会促使该块在水平方向和垂直方向居中。
2.宽度高度支持百分比%属性值和min-/max-属性，并且必须显式生命高度
负外边距居中
div{
width:100px;
height:100px;
padding:20px;
position:absolute;
top:50%;
left:50%;
/**重点：需要明确知道高度和宽度**/
margin-left: -60px;//(width+padding)/2
margin-top:-60px;//(height+padding)/2
}
1.使用absolute定位，距离左边50%，上边50%，再通过设置margin为负值，扣去该块本身占有的宽高。另外，需要明确指定宽度和高度！
变形居中
div{
width: 50%;
position: absolute;
left: 50%;
top: 50%;
/**重点:向上偏移本身高度和宽度的一半**/
transform: translate(-50%,-50%);
}
1.通过translate设置块水平和垂直方向各移动自身高度宽度的50%距离。
2.浏览器需支持CSS3
单元格居中
div{
display: table-cell;
height: 300px;
vertical-align: middle;
text-align: center;
}
1.通过表格单元格来实现居中也是一种广泛使用的方式，这也是早期web使用table来布局的一个主要原因。另外，使用单元格来实现垂直居中可以支持多元素同时居中！！！
Flexbox
<div class="container">
<div class="child">
CSS3非常简单的居中方式！
</div>
</div>
.container {
display: flex;
height: 300px;
}
.child {
margin: auto;
}
1.Flexbox是CSS3新增布局属性，不但可以非常简单地实现居中布局，在实现其他布局方式时也带来了很大的帮助，比如多栏布局。