共计 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/
正文完