关于html:第-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/