水平居中
块级元素居中
块级元素加以下样式：
div {
margin: 0 auto;
}
行内元素居中：
<div class="outer">
<span class="inner">hello world!</span>
</div>
text-align:center;适用于行内元素，文字，图片以及inline-block在块级元素内居中。
.outer {
text-align: center;
}
垂直居中
1.height=line-height：使行内元素，文字，inline-block元素在块级元素内居中。缺点：必须知道且固定外层块级元素的高度。
.outer {
height: 300px;
line-height: 300px;
}
2.vertical-align + table-cell：使行内元素，文字，inline-block元素以及块级元素在块级元素内居中。
.outer {
display: table-cell;
vertical-align: middle;
}
绝对定位元素的居中
.outter {
position: relative;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
优点：绝对居中，即使内外层容器宽高发生了变化，内层元素也是居中的。缺点：兼容性差。
浮动元素的居中
<div class="outer">
<div class="box">
<div class="inner">
hello world!
</div>
</div>
</div>
浮动元素水平居中原理：使浮动元素向右移动父元素的50%，再向左移动自身的50%，形成水平居中，所以要在浮动元素内部再加一层块级元素，通过相对定位实现向左平移50%。
.box {
float:left;
position: relative;
left: 50%;
}
.inner {
position: relative;
left: -50%;
}
Flex布局
flex布局十分简洁，但是兼容性较差
.outer {//在外层元素上
height: 300px;
display: flex;
justify-content: space-around;//元素水平居中
align-items: center;//元素垂直居中
}
