水平居中

inline元素:text-align:center;
block元素:margin:auto;(前提元素有宽度)
absolute元素:left:50% + margin-left负值;

垂直居中

inline元素:line-height的值等于height的值
absolute元素:top:50% + margin-top负值
absolute元素:transform: translate(-50%, -50%);
absolute元素:top,bottom,left,right=0 + margin:auto

垂直水平居中

接下来展示的方法的HTML 结构

<div class="father">
      /*实现子元素son的垂直水平居中*/
        <div class="son"></div>
    </div>

通过定位加其他方式实现

bsolut + top,bottom,left,right=0 + margin:auto(需知道子元素宽高)
absolute + 负 margin(需知道子元素宽高)
absolute + transform的translate函数
absolute + calc函数 (需知道子元素宽高)

通过布局实现

flex-弹性布局
grid - 网格布局
table-cell -表格单元格布局

补充: text-align:center + line-height的值等于heigh(适用文本居中)

absolut + top,bottom,left,right=0 + margin:auto(需知子元素宽高)

// 父元素 非静止定位
.father{
position:relative;
}
// 子元素
.son{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    }

此种方法需要知道被居中元素的宽高,才能让 margin: auto;生效,均分上,下,左,右四个方向的距离,最终实现居中;

absolute + 负 margin(知道子元素的宽高)

// 父元素  非静止定位
   .father{
    position:relative
    }

 // 子元素 绝对定位
   .son {
    position: absolute;
    top: 50%;
    left: 50%;
    
    margin-top: 负 子元素高度的一半;
    margin-left: 负 子元素宽度的一半;
    }

基于父元素进行绝对定位(子元素的左上角为定位点)后,子元素向下和向右各移动父级高度和宽度的一半,此时由于子元素自身带有宽高,所以会偏移到父元素的右下方，如图下所示

此时,使用margin负值,子元素向上和向左各移动自身高度和宽度的一半,最终实现子元素在父元素中的垂直水平居中

==>注意:此种方法需要知道子元素的宽高

absolute + transform的translate函数

// 父元素  非静止定位
   .father{
    position:relative
    }

 // 子元素 绝对定位
   .son {
    position: absolute;
    top: 50%;
    left: 50%;
    
    transform: translate(-50%, -50%);
    }

此种方法和absolute + 负 margin一样都是先绝对定位移动后通过top、left至父元素的右下角位置
不同的是此种方法不需要知道子元素的宽高,而是利用css3新增的transform属性里translate函数的百分比,让子元素向上和向左各移动自身宽高的50%(一半),实现垂直水平居中;

absolute + calc函数 (需知子元素宽高)

// 父元素  非静止定位
   .father{
    position:relative
    }

 // 子元素 绝对定位
   .son {
    position: absolute;
    top: calc(50%  -  子元素高度一半);
    left: calc(50%  -  子元素宽度一半);
    }

基于父元素进行绝对定位后,通过设置子元素的top和left属性中的calc函数，函数值：分别为父元素高度和宽度的一半减去子元素自身高度和宽度的一半，实现了子元素在父元素中垂直水平居中的效果。
注:calc是一个CSS函数，可以进行简单的数学计算，并返回计算结果。
===>此种方法,需要知道子元素的宽高.

========>以上的4种方式都需要他们的父级是非静止定位(position值不为static）,子元素基于父级进行绝对定位才会生效;

flex-弹性布局

//父级
.father{
       display: flex;
       /* 主轴方向 -水平居中*/
      justify-content: center;
     /* 侧轴方向 -垂直居中*/
       align-items: center; 
   }

设置父元素的display属性为flex，将其变成一个弹性容器。通过设置justify-content属性和align-items属性来分别控制子元素主轴方向和侧轴方向上的排列方式,实现水平垂直居中,

justify-content:center;让元素在主轴方向上居中对齐，---水平居中
align-items:center;让子元素在侧轴方向上居中对齐，---垂直居中

grid - 网格布局

   .father {
         display: grid;
      }
    .son {
        justify-self: center;
        align-self: center;
        }

设置父元素的display属性为grid，将其变成一个网格容器。再利用子元素的align-self属性和justify-self属性来分别控制自身在网格容器中垂直方向和水平方向上的位置对齐方式，来实现居中。

justify-self:center;可让子元素在水平方向上居中对齐;
align-self:center;让子元素在垂直方向上居中对齐

table-cell 表格单元格布局

  .father { 
         display: table-cell; 
         text-align: center; 
         vertical-align: middle;
   } 
   .son{ 
      display: inline-block;
       }

父级display属性设置为"table-cell"，表格单元格容器。使用"text-align: center"水平居中元素、"vertical-align: middle"垂直居中元素，控制子元素垂直和水平方向都居中。

然后再设置子元素display属性设置为"inline-block"，使其在父元素中保持块级属性同时能够水平居中。

text-align:center + line-height的值等于heigh,

   .father{
            width: 200px;
            height: 200px;
            background-color: rgb(238, 107, 107);
            /*控制子级文本居中*/
            text-align: center;
            line-height: 200px;
        }
    </style>

  <div class="father">
        <div class="son"> 
        <span>啦啦</span> 
        </div>
    </div>

通过父元素来控制子元素里面的文本垂直水平居中,如果只是简单的设置文本居中可以使用

常用的css实现元素垂直水平居中的方式