將多個嵌套DIV居中標記為HTML CSS
[英]Centring Multiple Nested DIVs Within The Body Tags HTML CSS
問題描述
我有多個嵌套的div's ，它們跟隨包含某些內容和頁腳信息的文檔流。 每個div都有一個id並且使用width css屬性將一個命名的content限制為約800px 。
我的問題是，當我擴展網頁時，帶有所有嵌套div's div content div's保留在網頁的左上角，其margin為30px 。 我希望content div及其所有嵌套的div's位於div main的中心。 我以為可以通過應用css style margin 0 auto;來實現這一點margin 0 auto; 。 我附上一張圖片，試圖說明我的意思。 第一張圖片展示了我網站的現狀。
編輯：
這是我的代碼。 如果需要，我可以提供更多：
<!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>
2 個解決方案
解決方案1
1 已采納 2014-12-22 14:50:08
僅當#content小於#main （基本上是屏幕尺寸）時，此解決方案才有效。
首先，通過為html ， body和#main設置height: 100% ，確保#main占據屏幕height: 100% 。
以定位#content在的水平和垂直中心#main它將被絕對定位。 為了使其具有#main作為參考框架，請添加position: relative對於#main position: relative #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>
解決方案2
0 2014-12-22 14:48:52
margin: 0 auto; 除非您給div一個寬度，否則它將無法工作，因為如果您考慮它，如果div沒有寬度，瀏覽器將如何計算雙方的距離？
您還可以將div的中間text-align: center;到text-align: center; ，但是對於垂直居中有幾種方法
- 您可以使用以下
position: absolute;欺騙或使用vertical-align: middle但這需要display: inline-block;否則它將無法正常工作。
嵌套div上的HTML和CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.