不固定宽度高度div垂直居中显示

1.<div class="center">居中</div>
<style>
    .center {
        position: fixed;//absolute;
        top: 50%;
        left: 50%;
        background-color: #fff;
        transform: translateX(-50%) translateY(-50%);
    }
</style>
2.<div class="center">居中</div>
<style>
    .center {
		justify-content:center;//子元素水平居中
        align-items:center;//子元素垂直居中
        display:-webkit-flex;
    }
</style>
3.运用margin:auto进行垂直居中
<div class="father">
    <div class="son"></div>
</div>
.father{position:fixed;
        width:100%;
        height:100%;
        top:0;
        left:0;
        background-color:rgba(0,0,0,.7);}
.son{position: absolute;
     top:0;
     left:0;
     bottom:0;
     right:0;
     width:50%;
     height:50%;
     margin:auto;
     background-color:red;}