在身體標籤中居中多個嵌套的DIV HTML CSS

我有多個嵌套div's，它們遵循包含一些內容和頁腳信息的文檔流。每個div有一個id和一個名爲content約束使用widthcss屬性約800px。在身體標籤中居中多個嵌套的DIV HTML CSS

我的問題是，當我展開的網頁中，divcontent及其所有嵌套div's保持在與30pxmargin網頁的左上角。我希望contentdiv及其所有嵌套的div's位於divmain的中心。我想我可以通過應用css風格margin 0 auto;來實現這一點。我附上了一張圖片來試圖說明我的意思。第一張圖片展示了我的網站的行爲。

Div's

編輯：

以下是我的代碼。如果需要，我可以提供更多：

<!doctype html> 
<html> 
    <head> 
     <style type="text/css"> 

      body { 
       margin: 30px; 
      } 
      #main { 
       margin: 0 auto; 
      } 

     </style> 
    </head> 
    <body> 

     <div id="main"> 

      <div id="main_index"> 

       <div id="content"></div> 
       <div id="footer"></div> 

      </div> 

     </div> 

    </body> 
</html>

來源

2014-12-22 user1574598

'位置：絕對; top：0;正確：0;左：0;底部：0; margin：auto;'把它放在'＃main'上。這將需要一個確定的高度。 [演示]（HTTP：//的jsfiddle。net/01ajut1j /） – Ruddy

該解決方案只適用於#content小於#main，這基本上是屏幕尺寸。

首先確保#main通過賦予html，body和#main一個height: 100%佔據了屏幕高度的100％。

要將#content定位在#main的水平和垂直中心，它將被絕對定位。要讓它具有#main作爲參考幀，請將position: relative添加到#main。 #content獲得top: 50%和left: 50%，這使得#content的左上角開始於#main的中心。 #content得到一個transform: translate(-50%, -50%)以將其寬度的50％推向左側並將其高度的50％推向頂部。這使它完全居中。

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
#main { 
 
    position: relative; 
 
    height: 100%; 
 
} 
 

 
#content { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.box { 
 
    border: 1px solid #c66; 
 
    background-color: #f99; 
 
    width: 300px; 
 
    height: 300px; 
 
}

<div id="main"> 
 
    <div id="content""> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

來源

2014-12-22 14:50:08 ckuijjer

感謝那正是我想要它的行爲。我非常喜歡看我的div結構，它與我上面的代碼有點不同。給我幾分鐘，我會編輯我的原始代碼。我也會編輯我的圖片以匹配div的參與。 – user1574598

只需用'＃main_index'替換我的代碼中的'＃content'，它就可以工作。之後你可以用你喜歡的任何東西來填充現在所謂的'＃main_index'，所以在你的情況下你的'＃content'和'＃footer' – ckuijjer

謝謝 - 我已經將代碼添加到了我的css中，並且main_index div完全切入一半在我的大部分內容已經從頂部消失另外，我使用崇高的文字3，它似乎並沒有認識到變換：translate（-50％，-50％）;.這意味着它不會像所有其他CSS屬性一樣自動填充它。 – user1574598

的margin: 0 auto;不會工作，除非你給了DIV的寬度，因爲如果u仔細想想，瀏覽器將如何計算雙方的距離，如果DIV沒有寬？，

ü也可以對齊一個div在中間與text-align: center;，但垂直居中有一對夫婦的方式

ü可以用position: absolute;惡作劇還是使用vertical-align: middle但是這需要一個display: inline-block;或它不會工作。

來源

2014-12-22 14:48:52 ctf0

在身體標籤中居中多個嵌套的DIV HTML CSS

回答

相關問題