元素居中的几种方法：
① 块级元素margin:0 auto;
针对嵌套的盒子元素，子元素在父元素中居中，只在水平方向上有效，浮动流排版中不可用
② 内联元素text-align:center;
对块级元素设置此属性，使得盒子内的内联元素居中，一般包括文字/图片等
③ 背景background-position:center top;
主要实现背景图片的居中
④ 文字行内垂直居中
一行文字垂直居中：文字行高line-height的值与盒子的高度一致
多行文字垂直居中：文字内边距设置padding: (height-行高*行数)/2;box-sizing:border-box;
⑤ 绝对定位水平居中：绝对定位元素的left:50%; 然后设置绝对定位元素的margin-left:-元素宽度的一半
但在企业开发中，推荐使用以下方法让元素居中：(不需要清楚元素的宽度)
水平居中：left: 50%; transform:translateX(-50%);
垂直居中：top:50%; transform:translateY(-50%);
⑥ 当图片元素尺寸大于父元素
text-align:center与margin:0 auto;不会使图片居中，可以：图片设置属性margin:0 -100%; 并且父元素设置text-align:center;
⑦ 弹性布局方式
主轴对齐方式：justify-content:flex-start/flex-end/center/space-between/space-around;
侧轴对其方式：align-items:flex-start/flex-end/center/baseline/stretch(伸缩项不能设置高度，否则拉伸失效)
原文：https://www.cnblogs.com/xiaomi0610/p/12082970.html