top、right、bottom、left 的值是相对于父元素尺寸的，margin、transform 是相对于自身尺寸的。
一、水平居中
1、行内元素水平居中
例如span这种行内元素想要水平居中，可以在其父元素上设置text-align: center。
需要子元素宽度小于父元素宽度。
2、块级元素水平居中（定宽）
给需要水平居中的块元素设置margin: 0 auto，块元素必须指定宽度，且宽度必须小于父元素。
.child {
width: 200px;
margin: 0 auto;
}
3、多个块级元素在一行上水平居中
将块元素转为行内块元素，在父元素上设置text-align: center。但是块元素之间会有空白间隔。
#parent {
text-align: center;
}
.child {
display: inline-block;
}
4、定位，子绝父相
对于行内元素/块级元素/浮动元素都适用，子元素中有文字时可以不设置宽高。
.parent {
width: 100%;
height: 200px;
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
5、Flex 布局
.parent {
display: flex;
justify-content: center;
}
6、网格布局
.parent {
display: grid;
justify-items: center;
}
二、垂直居中
1、单行文本/行内元素垂直居中
可以使用height和line-height设置同一高度。
.parent {
height: 50px;
line-height: 50px;
}
2、vertical-align: middle
.parent {
line-height: 100px;
}
.child {
display: inline-block;
vertical-align: middle;
}
3、定位，position + margin，父元素和子元素需要设置高度
.parent {
position: relative;
height: 400px;
}
.child {
position: absolute;
height: 100px;
top: 50%;
margin: -50px 0 0 0;
}
4、定位，position + transform，父元素需要设置高度，子元素不需要设置高度
.parent {
position: relative;
height: 400px;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
5、Flex 布局
.parent {
display: flex;
align-items: center;
}
6、网格布局
.parent {
display: grid;
align-items: center;
}
7、Table 布局
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
三、垂直水平居中
1、text-align + line-height，实现单行文本垂直水平居中
.parent {
line-height: 200px;
text-align: center;
}
.child {
display: inline-block;
vertical-align: middle;
}
2、绝对定位，父元素和子元素需要设置宽度和高度
第一种：
.parent {
position: relative;
width: 500px;
height: 500px;
}
.child {
position: absolute;
width: 200px;
height: 200px;
/* top、bottom、left 和 right 均设置为 0 */
top: 0;
bottom: 0;
left: 0;
right: 0;
/* margin 设置为 auto */
margin: auto;
}
第二种：
.parent {
position: relative;
width: 600px;
height: 600px;
}
.child {
width: 500px;
height: 300px;
margin: -150px 0 0 -250px;
position: absolute;
left: 50%;
top: 50%;
}
3、定位，子元素不需要设置宽度和高度
.parent {
position: relative;
width: 600px;
height: 600px;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
4、Flex 布局
.parent {
display: flex;
justify-content: center;
align-items: center;
}
5、网格布局
.parent {
display: grid;
place-items: center;
}
6、Table 布局，需要设置宽度和高度
.parent {
width: 500px;
height: 200px;
display: table-cell;
vertical-align: middle;
}
.child {
width: 100px;
height: 50px;
margin: 0 auto;
}
若子元素是图像，不可使用table-cell，而是其父元素用行高代替高度，且字体大小设为 0，子元素设置vertical-align: middle。
.parent {
text-align: center;
line-height: 100px;
/* 消除空白节点 */
font-size: 0;
}
.img {
vertical-align: middle;
}