在 CSS 中，“居中一个 div”通常分三种常见情况：水平居中、垂直居中、水平垂直同时居中。下面按常用程度给你总结几种主流写法。
div {
text-align: center;
}
⚠️ 只对行内元素或文本有效。
.box {
width: 200px;
margin: 0 auto;
}
✅ 适用于已知宽度的块级元素。
.parent {
display: flex;
align-items: center;
height: 300px;
}
.box {
height: 100px;
line-height: 100px;
}
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
<div class="parent">
<div class="box">居中</div>
</div>
.parent {
position: relative;
height: 100vh;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.parent {
display: grid;
place-items: center;
height: 100vh;
}
| 场景 | 推荐方式 |
|---|---|
| 水平居中 | margin: 0 auto |
| 垂直居中 | flex + align-items |
| 完全居中 | flex / grid |
如果你是 某个具体布局场景（比如弹窗、图片、未知宽高），可以告诉我，我可以给你更精确的方案。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
