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