css 元素居中解决方案

元素居中

居中div

• flex

    main{
        width:200px;
        height:300px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

• 定位+transform

    div{
         position: relative;
    }
    main{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50% , -50%) ;
    }

• 定位

    div{
        width: 100%;
        height: 100%;
        position:relative;
    }
    main{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:auto;
    }