第 19 题：让一个 div 水平垂直居中有几种方式？

<img src="https://noxussj.top:3000/19/1.png"></img>

实现上方效果，下面列举几个常用的方法，个人比较推荐用 flex 布局实现

方式 1（利用 margin 和绝对定位）

html

<div class="container">
    <div class="box"></div>
</div>

css

.container {
    position: relative;
    width: 150px;
    height: 150px;
    background-color: #000;

    .box {
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 50px;
        height: 50px;
        background-color: #fff;
    }
}

方式 2（利用 flex 布局）

html

<div class="container">
    <div class="box"></div>
</div>

css

.container {
    position: relative;
    width: 150px;
    height: 150px;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: center;

    .box {
        width: 50px;
        height: 50px;
        background-color: #fff;
    }
}

文章的内容/灵感都从下方内容中借鉴

• 【持续维护/更新 500+前端面试题/笔记】https://github.com/noxussj/In...
• 【大数据可视化图表插件】https://www.npmjs.com/package...
• 【利用 THREE.JS 实现 3D 城市建模（珠海市）】https://3d.noxussj.top/