使用 margin: 0 auto 可使块级元素（如 div）在其父容器内水平居中，同时保持内部文本左对齐，这是现代 css 中最标准、语义清晰且兼容性良好的实现方式。
使用 margin: 0 auto 可使块级元素（如 div）在其父容器内水平居中，同时保持内部文本左对齐，这是现代 css 中最标准、语义清晰且兼容性良好的实现方式。
在网页布局中，初学者常误用 <center> 标签或 text-align: center 来居中整个容器——但这两者本质不同：<center> 是已废弃的 HTML 标签，而 text-align 仅控制行内内容的对齐方式（如文字、图片），对块级容器自身的位置毫无影响。
要真正实现「容器居中、文字左对齐」，核心在于：
✅ 让 div 成为一个具有明确宽度的块级盒模型元素；
✅ 通过设置左右外边距为 auto，触发浏览器自动均分剩余空间；
✅ 显式声明 text-align: left（虽多数浏览器默认如此，但显式声明更可靠、可维护）。
以下是推荐写法（已移除过时标签，采用语义化结构与现代 CSS）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>居中容器示例</title>
<style>
.centered-box {
width: 1000px; /* 必须指定宽度 */
height: 150px;
margin: 0 auto; /* 关键：左右 auto 实现水平居中 */
text-align: left; /* 显式确保文字左对齐 */
border: 1px solid #0066cc;
overflow: auto;
padding: 15px 25px;
background-color: #A2E4B8;
color: #000000;
scrollbar-base-color: #DEBB07; /* 注意：此属性仅部分旧版 IE 支持，现代浏览器需用 ::-webkit-scrollbar 替代 */
box-shadow: 7px 7px rgba(0, 0, 0, 0.8); /* 修正 rgb() 语法：应为 rgba() 或使用十六进制/命名色 */
}
</style>
</head>
<body>
<div class="centered-box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
</body>
</html>⚠️ 重要注意事项：
- margin: 0 auto 仅对设置了明确宽度（width）的块级元素生效；若宽度为 100% 或 auto（未限制），则无居中效果；
- 避免使用 <center> 标签——它在 HTML5 中已被废弃，不符合语义化与可访问性规范；
- scrollbar-base-color 等私有滚动条样式在 Chrome/Firefox 中已不被支持；如需自定义滚动条，请使用 ::-webkit-scrollbar 伪元素（仅限 WebKit 内核）并做好降级处理；
- 若需兼容 Flexbox 布局（更灵活的现代方案），父容器可设为 display: flex; justify-content: center;，子 div 无需 margin: auto，且仍默认左对齐文本。
总结：margin: 0 auto 是解决「容器居中 + 文本左对齐」这一经典需求的基石方案。掌握它，不仅解决了当前问题，也为理解 CSS 盒模型与布局机制打下坚实基础。
