水平居中：
（1）内联元素：
text-align: center;利用 text-align: center ；可以实现在块级元素内部的内联元素水平居中。
如果一行中有多个块级元素，可以通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。
注意：此方法对内联(inline), 内联块(inline-block),内联表(inline-table), 内联块级弹性盒(inline-flex)元素水平居中都有效。
（2）块级元素：
margin: 0 auto；注意：当块级元素的宽度固定时，可通过margin: 0 auto；使块级元素水平居中。（未定宽度，居中无效）
（3）绝对定位+2D平移：
position: absolute；
left:50%；
transform: translateX(-50%)；注意：当块级元素的宽度不固定时，可通过绝对定位配合2D平移（平移相对于自身宽高的百分比），使块级元素水平居中。
（4）弹性盒子使用justify-content属性：
display: flex；
justify-content: center；注意：需将父盒子设置为弹性盒子，利用justify-content 属性（用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式）实现水平居中。
垂直居中：
（1）内联元素：
vertical-align:middle;vertical-align是用来指定内联元素或者表格单元格元素的垂直对齐方式。
可被用于：使内联元素盒模型与其内联元素容器垂直对齐。用于垂直对齐一行文本的内的图片，垂直对齐表格单元内容。
注意：使用vertical-align要清楚基线、边界的概念
vertical-align只对内联元素（inline、inline-block、inline-table）、表格单元格元素（table-cell）生效。不能用它垂直对齐块级元素。
（2）行高与高度一致：
line-height: **px;
height: **px;内联元素的高度(height)和行高(line-height)相等时，元素垂直居中。
（3）块级元素：
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;注意：当块级元素的高度固定时，通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，使块级元素垂直居中。
（4）绝对定位+2D平移：
position: absolute;
top: 50%;
transform: translateY(-50%)；注意：当块级元素的高度不固定时，可通过绝对定位配合2D平移（平移相对于自身宽高的百分比），使块级元素垂直居中。部分浏览器存在兼容性的问题。
（5）弹性盒子使用 align-items属性：
display: flex；
align-items: center；注意：需将父盒子设置为弹性盒子，利用align-items 属性（用于设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式）实现垂直居中。
（6）利用表布局（table）
display:table；
display:table-cell；注意：父容器设为display:table让他成为一个块级表格元素，子元素display:table-cell使子元素成为表格单元格，
然后就像在表格里一样，给子元素加个vertical-align: middle就行了,多行文字垂直居中。（常规的登录及注册页面都需要用到）
（7）精灵元素(ghost element)技术
.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;
width: 20rem;
}在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。个人认为本质就是第（1）种方法。
水平垂直居中：
（1）固定宽高
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
width: 100px;
height: 100px;}（2）不定宽高
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}（3）利用flex布局
.parent {
display: flex;
justify-content: center;
align-items: center;
}（4）利用grid布局（兼容性较差，不推荐）
.parent {
height: 140px;
display: grid;
}
.child {
margin: auto;
}（5）利用表布局（table）
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
}————————————————
资料参考：
CSDN博主「微个日光日」
原文链接：https://blog.csdn.net/xiebaochun/article/details/89838522
简书博主「Iam_Bling」
原文链接：https://www.jianshu.com/p/ce7e4a997a2c
前端小白，有哪些不足的地方，希望大家多多指教