css中div居中有几种方法

方法一：使用margin实现DIV居中

div{
    width: 200px;
    height: 200px;
    margin:0 auto;
} 

方法二：使用绝对定位实现DIV居中

div{
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
} 

方法三：使用flex实现DIV居中

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
div{
    width: 200px;
    height: 200px;
} 

方法四：使用grid实现DIV居中

.container{
    display: grid;
    place-content: center;
    height: 100vh;
}
div{
    width: 200px;
    height: 200px;
} 

方法五：使用transform实现DIV居中

div{
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}