css margin-auto在盒模型中如何居中元素-css教程-PHP中文网

css margin-auto在盒模型中如何居中元素

P粉602998670

发布： 2025-10-06 17:42:02

原创

1042人浏览过

块级元素设置固定宽度和margin: auto可实现水平居中，需父容器非绝对定位且元素不浮动；适用于传统布局，但复杂场景多用Flex或Grid替代。

css margin-auto在盒模型中如何居中元素

使用 margin: auto 在 CSS 盒模型中实现元素居中，是一种常见且有效的水平居中方法。它主要适用于块级元素，并在特定条件下生效。

基本原理：margin 自动分配空间

当一个块级元素设置了固定宽度（width），并且左右外边距（margin）设置为 auto 时，浏览器会自动计算并平均分配剩余的水平空间给左右 margin，从而实现水平居中。

关键条件是：元素必须有明确的宽度，且不能是 100% 或 unset 等占满父容器的情况。

示例代码：

新鲜水果网站销售模板

网站模板是能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表），这里主要讲Javascript。那么Javascript是什么东西？Javascript就是适应动态网页制作的需要而诞生的

查看详情

立即学习“前端免费学习笔记（深入）”；

.centered-box {
  width: 300px;
  margin: 0 auto; /* 上下 margin 为 0，左右为 auto */
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
}

登录后复制