大家好，欢迎来到程序视点！我是你们的老朋友.小二！
CSS实现DIV水平与垂直居中方法总结一、水平居中方案标准方法
.center-div { margin-left: auto; margin-right: auto; }
关键点：必须声明DOCTYPE（推荐XHTML 1.0 Transitional DTD），否则IE不生效浏览器差异：Firefox直接生效，IE需DTD支持兼容性方案
body { text-align: center; } /* 父级 */ #center { margin: 0 auto; /* 子级 */ text-align: left; /* 防止文字继承居中 */ }
二、垂直居中方案背景图片居中
.bg-center { background: url(...) no-repeat center; }
文本垂直居中
.text-center { height: 200px; line-height: 200px; /* 行高=容器高度 */ vertical-align: middle; /* 需配合display属性使用 */ }
绝对定位+expression（IE特有）
#element { position: absolute; top: expression((document.body.clientHeight-50)/2); left: expression((document.body.clientWidth-50)/2); }
三、关键注意事项DTD声明是IE下水平居中的前提多DIV嵌套时建议逐层设置margin:auto而非全局控制垂直居中需区分内容类型（图片/文本/区块）expression方法存在性能问题，现代开发建议使用Flexbox替代四、现代CSS替代方案（补充）推荐使用Flexbox实现：
代码语言：javascript复制.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
} 注：原文案例基于IE6/Firefox 1.0环境，部分方法（如expression）已过时，但核心原理仍具参考价值。
最后【程序视点】助力打工人减负，从来不是说说而已！后续小二哥会继续详细分享更多实用的工具和功能。
如果这篇文章对你有帮助的话，别忘了【在看】【点赞】支持下哦~