css水平垂直居中的4种方法

css垂直居中

第一种

.center{
	width:200px;
    height:200px;
    background: #000;
    position:fixed/absolute;
    top:50%;//向有移动父盒子宽度的一半
    left:50%;
    margin-left:-W/2;//W(200px) //向左移动自身宽度的一半
    margin-top:-H/2;
}

存在问题：必须知道center盒子的具体宽高

第二种

.center{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
}

第三种

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

第四种
在父盒子上设置
{
display: flex;
justify-content: center;
align-items: center;
}