大家好，歡迎來到程序視點！我是你們的老朋友.小二！

CSS實現DIV水平與垂直居中方法總結

一、水平居中方案

1. 標準方法

   .center-div?{margin-left:?auto;margin-right:?auto;
   }
   

   • 關鍵點：必須聲明DOCTYPE（推薦XHTML 1.0 Transitional DTD），否則IE不生效

   • 瀏覽器差異：Firefox直接生效，IE需DTD支持

2. 兼容性方案

   body?{?text-align:?center;?}??/*?父級?*/
   #center?{?margin:?0?auto;??????????/*?子級?*/text-align:?left;????????/*?防止文字繼承居中?*/
   }
   

二、垂直居中方案

1. 背景圖片居中

   .bg-center?{background:?url(...)?no-repeat?center;
   }
   

2. 文本垂直居中

   .text-center?{height:?200px;line-height:?200px;??????/*?行高=容器高度?*/vertical-align:?middle;??/*?需配合display屬性使用?*/
   }
   

3. 絕對定位+expression（IE特有）

   #element?{position:?absolute;top:?expression((document.body.clientHeight-50)/2);left:?expression((document.body.clientWidth-50)/2);
   }
   

三、關鍵注意事項

1. DTD聲明是IE下水平居中的前提

2. 多DIV嵌套時建議逐層設置margin:auto而非全局控制

3. 垂直居中需區分內容類型（圖片/文本/區塊）

4. expression方法存在性能問題，現代開發建議使用Flexbox替代

四、現代CSS替代方案（補充）

推薦使用Flexbox實現：

.container?{display:?flex;justify-content:?center;??/*?水平居中?*/align-items:?center;??????/*?垂直居中?*/
}

注：原文案例基于IE6/Firefox 1.0環境，部分方法（如expression）已過時，但核心原理仍具參考價值。

最后

【程序視點】助力打工人減負，從來不是說說而已！后續小二哥會繼續詳細分享更多實用的工具和功能。

如果這篇文章對你有幫助的話，別忘了【在看】【點贊】支持下哦~