使一个盒子水平垂直居中的方法总结

实现效果

HTML结构：
<div class="parent"> <div class="child">子元素</div> </div>

1.利用定位（推荐）

        .parent {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        
        .child {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: yellow;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -150px;
        }

2.利用margin:auto

        .parent {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        
        .child {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

3.利用display:table-cell

        .parent {
            width: 300px;
            height: 300px;
            background-color: pink;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        
        .child {
            width: 100px;
            height: 100px;
            background-color: blue;
            display: inline-block;
        }

4.利用display:flex

        .parent {
            width: 300px;
            height: 300px;
            background-color: pink;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .child {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }

5.计算父盒子与子盒子的空间距离

        .parent {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        
        .child {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
            margin-top: 100px;
            margin-left: 100px;
        }

6.利用transform

        .parent {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        
        .child {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: yellowgreen;
        }