一、水平居中
- 所有inline元素（包括inline-block），如文本等：text-align:center
- 单个block元素：margin: 0 auto (需要确定的宽度)
- 多个block元素：（两种解决方案）
a.父级元素：text-align:center，子集元素：display:inline-block
b.父级元素：display:flex; justify-content: center;
二、垂直居中
- inline元素（分为两种情况）
a.单行：设置上下padding相同或者将line-height设为height的值
b.多行：
使用padding可以达到效果，若不能，说明父元素为table，无论是语义上的还是css设置的。此时，使用vertical-align:middle或者flex。但是会存在一个问题，这两种解决方案都会使所要垂直的元素高度最大化，充斥在父元素内。
以上方案若没有效果，采取最后一种方案
.father {
position: relative;
}
.father ::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center son {
display: inline-block;
vertical-align: middle;
width: 190px;
margin: 0;
padding: 20px;
background: black;
}
- block
a.确定高度或不确定高度
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* 高度的一半 */
//如果不确定高度，采用下列属性
transform: translateY(-50%);
}
b.使用flex
水平垂直居中
- 已知高度（方法同block已知高度垂直居中）
- 未知高度（同上）
- flex
