未知高度宽度垂直水平居中

1.弹性盒子

<div class="father">
        <div class="child">3132</div>
    </div>

	.father {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            display: flex;
            justify-content: center;
            align-items: center;
        }

2.transform： translate(-50%,-50%)
top：50%；left:50%;

	 <div class="a">
        <div class="b">3212</div>
    </div>

.a {
            width: 200px;
            height: 200px;
            /* border: 1px solid red; */
            background-color: green;
            position: relative;
        }
        
        .b {
            position: absolute;
            /* width: 100px;
            height: 100px;
            background-color: hotpink; */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

3.display: table-cell;vertical-align: middle; text-align: center;

	<div class="e">
        <div class="f">hjjhhj</div>
    </div>

.e {
            width: 200px;
            height: 200px;
            background-color: lightseagreen;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

4.text-align: center; line-height;

	<div class="g">
        <div class="h">6664</div>
    </div>

.g 		{
            width: 200px;
            height: 200px;
            background-color: mediumslateblue;
            text-align: center;
            line-height: 200px;
        }

5.已知高度
第一第二种方法都可用于已知高度的垂直水平居中

	<div class="c">
        <div class="d">
        </div>
    </div>

	.c {
            width: 200px;
            height: 200px;
            /* border: 1px solid red; */
            background-color: lightblue;
            position: relative;
        }
        
        .d {
            /* display: block; */
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: hotpink;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }