css实现任意元素水平垂直居中

要求: 元素尺寸改变, 无需修改css样式

center.png

html结构

<div class="container">
    <div>
        我不知道我的宽度和高是多少，我要实现水平垂直居中。
    </div>  
</div>

方案一: flex布局

.container{
    display: flex;
    justify-content: center; /*子元素水平居中*/
    align-items: center; /*子元素垂直居中*/
    height: 600px;
    border:1px solid red;
}
.container>div{
    text-align: center;
    width: 500px;
    height: 300px;
    background: orange;
    color: #fff;
}

方案二 : transform:translate(-50%,-50%);

.container{
    position: relative;
    height: 600px;
    border:1px solid red;
}
.container>div{
    position: absolute;
    left:50%;
    top:50%;
    text-align: center;
    background: orange;
    color: #fff;
    width: 500px;
    height: 300px;
    transform:translate(-50%,-50%); 
}

方案三

.container{
    position:relative;
    border:1px solid red;
    height: 600px;
}
.container>div{
    position:absolute;
    background: orange;
    text-align: center;
    width: 500px;
    height: 300px;
    margin:auto;
    top:0;
    bottom:0;
    left:0;
    right:0;
}