css盒子水平居中方法

方法一（定位）：

1、父元素position：relative

2、子元素position：absolute ，元素设置上下左右都为零值，margin设为auto

div{ 
    width: 100px;    
    height: 100px;    
    background-color: rgb(187, 111, 111);           
    position: relative;}

p{
    width：50px;
    height：50px; 
    background-color：#fff;
    position：absolute;
    left：0;
    right：0;
    top：0;
    bottom:0; 
    margin:auto
}

方法二（定位）：

1、父元素position：relative

2、子元素position：absolute ，left：50%；top：50%；margin-left：-25px；margin-top：-25px；
 

 div{        
    width: 100px;  
    height: 100px;  
    background-color: rgb(187, 111, 111);        
    position: relative;        
}        

p{ 
    width: 50px;  
    height: 50px; 
    background-color: #fff;            
    position:absolute;             
    top:50%;            
    left: 50%;            
    margin-left: -25px;            
    margin-top: -25px;        
}

方法三（定位+平移（常用））

1、父元素position：relative

2、子元素position：absolute ，left：50%；top：50%；transform:translate(-50%,-50%)
 

 div{        
    width: 100px;
    height: 100px; 
    background-color: rgb(187, 111, 111);       
    position: relative;       
 }        

p{ 
    width: 50px;
    height: 50px; 
    background-color: #fff;            
    position:absolute;             
    top:50%;            
    left: 50%;            
    transform:translate(-50%,-50%)   /* translate（水平平移，垂直平移） -50%代表自身大小的一半*/        }

方法四（vertical-align）：

补充知识：

vertical-align 属性设置一个元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长                         度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单                         元格框中的单元格内容的对齐方式。 

 所在行的基线的垂直对齐  

结构：

<div class="box">        

    <p class="small"></p> 
    <span>aaa</span>   /* 注意：保险期间 在子元素后面加span空标签 */
               
</div>

1.子元素：转为行内块元素 、在子元素后面加span标签（防止文件压缩后空格没有（空格也算文本））

    再设置vertical-align：middle；（目的不以基线对齐 ，将元素以中部对齐）

        注意：保险期间 在子元素后面加span空标签；

2.父元素：设置line-height  

代码演示：

div{
            width: 200px;
            height: 200px;
            background-color: rgb(187, 111, 111);
            line-height: 200px;    /* 父元素设置行高 垂直居中 */
            text-align: center;       /* 文本水平居中 */
            margin: 200px auto;
        }

p{

            display: inline-block; /* 设置为行内块 vertical-align起作用*/
            width: 50px;
            height: 50px;
            background-color: rgb(63, 41, 182);
            vertical-align: middle;    /* 规定子元素 在父元素中处于中间 */ 


}

效果：

子元素没有设置vertical-align：middle时  以基线对齐：

子元素设置vertical-align：middle后  子元素在父元素正中部 ：

方法五（弹性盒子（移动端常用））

补充知识：弹性盒 flex
       

弹性盒子没有真正意义上的x轴/y轴      （默认x轴为主轴方向）

设置父元素上
flex-direction：改主轴方向	row 默认为水平向右 column 垂直向下 row-reverse 水平向左 column-reverse垂直向上
flex-wrap 换行	nowrap默认不换行 、wrap换
justify-content 主轴对齐方式	flex-start 默认在主轴方向起点位置对齐 flex-end 在主轴方向终点位置对齐 center 中间 space-between 将空白区域平分在子项目之间 space-around 将空白区域环绕在子项目两边
align-items 当行交叉轴对齐方式	stretch 默认拉伸 （盒子高度不写 默认拉伸至父元素大小） flex-start 子项目在其所在行的起始位置摆放 flex-end 子项目在其所在行的结束位置摆放 center 中间
align-content：多行交叉轴对齐方式	flex-start 默认在所在行起点位置对齐 flex-end 在所在行终点位置对齐 center 中间         space-between 将空白区域平分在子项目之间        space-around 将空白区域环绕在子项目两边

    

设置在子项目上
align-self交叉轴齐方式	stretch 默认拉伸             flex-start 子项目在其所在行的起始位置摆放             flex-end 子项目在其所在行的结束位置摆放
order ：num num越大排序越后	写了order的，属性值越小的在越前面；           没写order的属性值默认为零，order可以写负值。
flex:number在父元素主轴方向的比份	数字
flex-shrink: 0/1;子元素压缩	0---不压缩； 1---压缩；

        代码：

 div{
            display: flex;
            width: 200px;
            height: 200px;
            background-color: rgb(187, 111, 111);
            margin: 200px auto;
            justify-content: center; /* 默认水平方向为主轴  主轴方向中间对齐*/
            align-items: center;    
        }
        p{

            width: 50px;
            height: 50px;
            background-color: rgb(196, 194, 207);
            

        }

 效果：

方法六（网格布局）grid

代码：

div{
            display: grid;
            width: 100px;
            height: 100px;
            background-color: rgb(187, 111, 111);
            margin: 200px auto;
            grid-template-columns: 1fr 1fr 1fr; 
            grid-template-rows: 1fr 1fr 1fr; 
            /* 给网格中每个单元格命名 */
            grid-template-areas:"a b c"
                        "e f g"
                        "i o p" ; 

        }
        p{
            grid-area: f;  /*将该元素注入中间的单元格中*/
            width: 50px;
            height: 50px;
            background-color: rgb(196, 194, 207);
         }