【CSS面试题】盒子水平垂直居中的五种方式

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

 .father {
            width: 500px;
            height: 500px;
            border: 1px solid;
        }
        
        .son {
            width: 100px;
            height: 100px;
            border: 1px solid;
        }

效果如下：

现在我们的需求是：
son这个小盒子在大盒子father的正中间。

方法一：

Flex布局：

 <style>
        .father {
            width: 500px;
            height: 500px;
            border: 1px solid;
            display: flex;
            justify-content: center;  //设置主轴上子元素的排列方式
            align-items: center;  //设置侧轴上的子元素排列方式
        }
        
        .son {
            width: 100px;
            height: 100px;
            border: 1px solid;
        }

效果：

方法二：

子绝父相（可以看我之前的博客，绝对定位的盒子怎么水平垂直居中）

 .father {
            position: absolute;
            width: 500px;
            height: 500px;
            border: 1px solid;
            /* display: flex;
            justify-content: center;
            align-items: center; */
        }
        
        .son {
            position: relative;
            top: 50%;
            margin-top: -50px;
            left: 50%;
            margin-left: -50px;
            width: 100px;
            height: 100px;
            border: 1px solid;
            //transform:translate(-50%, -50%)也能达到一样的效果
        }
    </style>

效果如上

方法三：

 <style>
        .father {
            width: 500px;
            height: 500px;
            border: 1px solid;
            display: table-cell;
            vertical-align: middle;
        }
        
        .son {
            width: 100px;
            height: 100px;
            border: 1px solid;
            margin: auto;
        }
    </style>

方法四：

 <style>
          .father {
            width: 500px;
            height: 500px;
            border: 1px solid;
            text-align: center;
            line-height: 500px;
        }
        
        .son {
            width: 100px;
            height: 100px;
            border: 1px solid;
            display: inline-block;
            vertical-align: middle;
        }
    </style>

方法五：

<style>
        .father {
            width: 500px;
            height: 500px;
            border: 1px solid;
            position: relative;
        }
        
        .son {
            width: 100px;
            height: 100px;
            border: 1px solid;
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
        }
    </style>