CSS水平居中和垂直居中

CSS水平居中和垂直居中

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

下面是一些案例的关键代码：

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为0其他的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%);
}

参考文章：

• https://juejin.cn/post/6844903474879004680
• https://juejin.cn/post/6844903982960214029