互联网的朋友你们好，下面我来分享css常用的居中方式。
个人感觉呢

• 最好用的还是flex布局，简单易记并且不需要考虑子元素是否设置固定宽高。
• 居中，不管是水平，还是垂直，或者都考虑，绝对定位，margin、transform:translate()这些是主要记忆的属性，再根据具体情形分析设置基本没问题了。 下面是一些案例的关键代码：

CSS水平居中和垂直居中

1.水平居中

1. 行内元素：对父元素设置text-align: center；

2. 块级元素：对自身设置margin：0 auto；

3. flex布局中对父元素:

    .son{
        display: flex;
        justify-content: center;
    }
   

4. 父相子绝，对子元素的left和translate

    .son{
          position:absolute;
          
          left:50%;
          transform:translate(-50%,0);
    }
   

5. 父相子绝，对子元素left和margin-left

 .son{
     position:absolute;
     
     width:固定;
     left:50%;
     margin-left:-0.5宽度;
 }

6.父相子绝，对子元素

 .son{
     position:absolute;
     width:固定;
     left:0;
     right:0;
     margin:0 auto;
 }

2.垂直居中

1. 单行文本，文本的line-height等于父元素的height

2. 对flex布局的父元素：

 son{
     display: flex;
     align-items:center
 }

3. 父相子绝，对子元素的top和translate

 .son{
       position:absolute;
       
       top:50%;
       transform:translate(0,-50%);
 }

4. 父相子绝，对子元素left和margin-left

 .son{
     position:absolute;
     
     width:固定;
     top:50%;
     margin-top:-0.5高度;
 }

5.父相子绝，对子元素

 .son{
     position:absolute;
     width:固定;
     top:0;
     bottom:0;
     margin:auto;
 }

3.盒子的水平垂直居中

1.父子宽高固定

1.父相子绝，left、top和负margin

 .son {
     position: absolute;
     width: 固定;
     height: 固定;
 ​
     left: 50%;
     top: 50%;
     margin-left: -宽度的一半px;
     margin-top: -高度的一半px; 
 }

2.父相子绝，left、top和transform

 .son{
     position: absolute;
     width: 固定;
     height: 固定;
    
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%); 
 }

3.父相子绝，margin为auto其他的left等都为0

 .children-box {
     position: absolute;
     width: 固定;
     height: 固定;
     
     margin: auto;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
 }

4.flex布局

对父元素设置

     display: flex;
     justify-content: center;
     align-items: center;

2.子元素宽高不固定

1.父相子绝，（以为百分设置left、top和transform)

 .son{
    position: absolute;
 ​
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
 }

参考文章：

• juejin.cn/post/684490…
• juejin.cn/post/684490…

这是我的第一篇掘金文章，希望我的分享对你有帮助，多多指教~