CSS基础之如何实现水平垂直同时居中

文本继CSS五种定位模式之后：

https://blog.csdn.net/m0_48749505/article/details/129545456?spm=1001.2014.3001.5502

又给大家带来了五种实现元素水平垂直居中的方法，分享给大家~

1.方式一：只操作当前元素(配合定位)     

.box{
    width:100px;
    height:200px
    positon:absolute;
    left:50%;
    top:50%;
    //-自身宽度的一半（100px/2）
    margin-left:-50px;
    //-自身高度的一半（200px/2）
    margin-top:-100px
}

2.方式二：只操作当前元素(配合定位+位移) 

.box{
    positon:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%)
}

3.方式三：只操作当前元素(配合定位)

.box{
    positon:absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    margin:auto;
}

4.方式四：操作父元素实现子元素水平垂直居中（配合弹性盒）

父元素{
    display:flex;
    justifiy-content:center;
    align-items:center;
}

5.方式五：同时操作父、子元素

父元素{
    display:flex;
}
子元素{
    margin:auto;
}