DIV在IE中無法居中如何解決

本篇內容介紹了“DIV在IE中無法居中如何解決”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

一、DIV水平布局居中介紹  

讓最外層DIV在IE瀏覽器中水平居中，除了對其設置margin:0 auto外，一般還要對body設置樣式，但一般高版本IE瀏覽器無須設置此CSS樣式也能使DIV居中，低版本IE比如IE6和對標準比較嚴格瀏覽器需要設置text-align:center。

有時不經意對要居中的最外層設置float:left或float:right也是造成設置margin:0 auto布局不能水平居中原因。

因為設置float是讓DIV浮動靠左或浮動靠右，你要讓DIV居中肯定需要設置margin:0 auto，這個時候就是邏輯錯誤了，即讓DIV靠左或靠右，又居中，這個明顯邏輯錯誤。所以要讓最外層DIV水平居中于瀏覽器中，就100%不能同時使用float，必須要使用margin:0 auto樣式。

二、DIVCSS5總結下最外層DIV盒子水平布局居中條件  

1、不能使用float（無論float:left和float:right都不能使用）
2、對body設置text-align:center，以便兼容低版本和高版本瀏覽器
3、對最外層DIV設置margin:0 auto，兼容各大瀏覽器水平居中樣式

三、DIVCSS5小實例說明

假如最外層DIV的CSS class命名為“main”，為了看到居中效果，對此盒子設置css寬300px、css高100px、紅色邊框，讓其居中。

此實例是在DIVCSS5初始化模板基礎上完成，以便更好兼容各大瀏覽器，建議無論實踐還是做項目，大家都可以使用DIVCSS5提供初始化模板基礎上開發制作，減少錯誤與增強CSS兼容性。

1、完整實例DIV+CSS代碼
1）、關鍵CSS代碼

body{ text-align:center} .main{ margin:0 auto; width:300px; height:100px; border:1px solid #F00}

2）、關鍵HTML代碼

<div class="main"> 容易填寫DIVCSS實例內容 </div>

2、效果截圖

“DIV在IE中無法居中如何解決”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！