1. 水平居中
1.1 行内或者具有行内元素性质的元素（比如文字或者链接）
使其父元素为块级元素的行内元素水平居中。
/* css */
.center-children {
text-align: center;
}
1.2 单个块级元素(定宽)
设置块级元素的 margin-left 和 margin-right 为 auto ，来使其水平居中。
注意：这个块级元素要有 width 属性，否则会占满宽度，这时候已经不需要居中了。
/* css */
.center-me {
margin: 0 auto;
}
1.3 多个块级元素（聚成一行居中）
方案一：利用display:inline-block; 块级元素inline-block,父元素text-align:center。
/* css */
.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
text-align: left;
}
方案二：flex布局
/* css */
.flex-center {
display: flex;
justify-content: center;
}
1.4 多个块级元素（在各自行居中）
利用 margin: xxxpx auto;
/* css */
main div {
margin: 0 auto;
}
2. 垂直居中
2.1 行内或者具有行内元素性质的元素（比如文字或者链接）
2.1.1 单行
方案一：padding-top === padding-bottom
/* css */
.link {
padding-top: 30px;
padding-bottom: 30px;
}
方案二：line-height === height
若 padding 无效，要使不换行的文字居中有一个技巧，设置文字的 line-height 和 height 的值相等。
/* css */
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
2.1.2 多行
方案一：padding-top === padding-bottom
方案二：table化 结合 verticl-align
如果这种方法不奏效的话，可以设置文字所在的元素为一个 table cell（无论它直接是 table 还是用CSS使这个元素表现的像一个 table cell），结合 vertical-align 属性处理这种情况，它与我们通常所做的在行上处理元素对齐的方式不同：
/* css */
/* table 的情况 */
table {
background: white;
width: 240px;
border-collapse: separate;
margin: 20px;
height: 250px;
}
table td {
background: black;
color: white;
padding: 20px;
border: 10px solid white;
/* default is vertical-align: middle; */
}
/* display:table 的情况 */
.center-table {
display: table;
height: 250px;
background: white;
width: 240px;
margin: 20px;
}
.center-table p {
display: table-cell;
margin: 0;
background: black;
color: white;
padding: 20px;
border: 10px solid white;
vertical-align: middle;
}
方案三：flex布局
注意：父元素height值(px %)固定
/* css */
.flex-center-vertically {
display: flex;
justify-content: center; /* 排列方向变了，所以变成了垂直方向上的水平居中 */
flex-direction: column; /* 垂直排列 */
height: 400px;
}
方案四：伪元素
原理：让一个完整高度的伪元素放置在容器内，并与文本垂直对齐。
/* css */
.ghost-center {
position: relative;
}
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
}
2.2 块级元素
2.2.1 元素高度确定
绝顶定位+百分比+负margin
/* css */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px; /* 考虑padding 和 border 如果不使用box-sizing: border-box; */
}
2.2.2 元素高度不确定
不知道元素的高度是比较常见的，有很多原因：如果宽度改变，文本回流会改变高度；文字样式改变会改变高度；文字数量改变会改变高度；一个固定比例的元素，比如图片，当重置尺寸的时候也会改变高度，等等。
方案一：绝对定位+百分比+transform
/* css */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
2.2.3 flex布局（通用）
/* css */
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
3. 垂直水平居中
3.1 元素有固定的宽和高
绝对定位+百分比+负margin组合
/* css */
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px; /* 感觉好傻，直接用下面的百分比方法也可以 */
}
3.2 元素的宽和高未知
方案一：绝对定位+百分比+transform组合
/* css */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3.3 flex布局（通用）
/* css */
.parent {
display: flex;
justify-content: center;
align-items: center;
}
3.4 grid布局（通用）
/* css */
body, html {
height: 100%;
display: grid;
}
span { /* thing to center */
margin: auto;
}
