关于html:第-19-题让一个-div-水平垂直居中有几种方式

28次阅读

共计 762 个字符,预计需要花费 2 分钟才能阅读完成。

<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/

正文完
 0