水平居中
inline 或 inline-* 元素
对于内联的子元素水平居中，我们只需要设置父级块级元素的text-align: center;就行。
块级元素
对于块级元素的居中，我们可以设置这个块级元素的margin-left和margin-right为auto就行。如margin: 0 auto;。
垂直居中
inline 或 inline-* 元素
我们可以设置行内元素的padding-top和padding-bottom为一个具体的值，如padding: 30px 0;。
或者我们设置父级元素的height等于line-height。如
.box {
height: 100px;
line-height: 100px;
}
块级元素
如果知道要垂直居中的元素的高度，那么我们就可以使用absolute定位来垂直居中。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
我们将居中元素top设置为50%，然后让它的上边距为它的负的高度一般。
如果不知道元素的高度，我们可以使用transform: translateY(-50%);来垂直居中
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
垂直水平居中
和上面一样如果知道元素的宽高可以使用margin来垂直居中。
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
如果不知道元素的宽高可以使用translate来垂直居中。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
我们还可以使用margin: auto来垂直居中。
div {
position: absolute;
width: 100px;
height: 100px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: red;
}
因为定位元素，其对立定位方向属性同时有具体定位数值的时候（如同时设置left和right），就会拥有流体特性。
而且具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样。所以我们就可以用来水平或垂直或垂直水平居中元素。
