未知宽高垂直水平居中的方法

<div class="father">
    <div class="sun"></div>
</div>

第一种

.father{
            width: 500px;
            height: 500px;
            background-color: #cccccc;
            position: relative;
        }
        .sun{
            width: 100px;
            height: 100px;
            background-color: #ffffff;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }

第二种

.father{
            width: 500px;
            height: 500px;
            background-color: #cccccc;
            position: relative;
        }
        .sun{
            width: 100px;
            height: 100px;
            background-color: #ffffff;
            position: absolute;
            margin: auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

第三种（弹性盒子）

.father{
            width: 500px;
            height: 500px;
            background-color: #cccccc;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .sun{
            width: 100px;
            height: 100px;
            background-color: #ffffff;
        }