css 块级元素 行级元素居中

行内元素 display:inline-block 给定宽高后居中

text-align: center; /*  文字 行内元素 行内块元素水平居中 */

块级元素居中

margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto  */

图片和文字居中

 img {
    vertical-align: middle;/*  设置图片和文字对齐的基线 */
}

vertical-align 是对齐居中的意思，同一父元素下，一个元素相对另一个居中

    .box1::after {
            content: "";
            display: inline-block;
            height: 100%;
            width: 0px;
            vertical-align: middle;
        }
    /*增加上这个伪元素，即可让box2基于box1居中，box1又是100%高，因此再父容器中居中 *\
	.box2 {
            display: inline-block;
            vertical-align: middle;
            width: 100px;
            height: 50px;
        }

文字居中 高和行高相同

    height: 42px;
    line-height: 42px;
    text-align: center;

flex水平 垂直居中

display: flex;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/

使用margin absolute 居中

 .spancenter {
            position: absolute;
            height: 200px;
            width: 200px;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

偶然发现一片写的很好的居中文章：
https://www.cnblogs.com/coco1s/p/4444383.html