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