水平居中
1.行内或者具有行内元素性质的元素（比如文字或者链接）
父元素为块级元素，子元素为行内或者具有行内元素性质的元素，可以使用text-align: center;
2.单个块级元素
设置块级元素的 margin-left 和 margin-right 为 auto 来使它水平居中（width 属性必须被设置，否则它会占满宽度）。代码：
margin: 0 auto;
垂直居中
1.行内或者具有行内元素性质的元素（比如文字或者链接）
单行
我们可以设置上下内边距padding相同，或者line-height和height的值相等。
多行
-父元素高度确定的单行文本（内联元素） 设置 height = line-height；
-父元素高度确定的多行文本（内联元素）a:插入 table （插入方法和水平居中一样），然后设置vertical-align:middle；b:先设置 display:table-cell 再设置 vertical-align:middle；
2.块级元素
2.1知道块级元素的高度
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}
2.2元素高度未知
可以通过 transform 来达到目的：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
垂直水平居中
3.1元素有固定的宽和高
用负的 margin 值使其等于宽度和高度的一半，当你设置了它的绝对位置为 50% 之后，就会得到一个跨浏览器支持的居中:
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
3.2元素的宽和高未知
如果不知道元素的高度和宽度，可以用 transform 属性，用 translate 设置 -50%（它以元素当前的宽和高为基础）来居中:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
