CSS - 如何居中嵌套的div？

我試圖居中使用的代碼嵌套的div下面

HTML

<html> 
    <head> 
     <title>My website</title> 
     <link rel="stylesheet" type="text/css" href="css/main.css" /> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="formpanel"> 
       <div id="loginForm"> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

CSS

body { 
    margin: 0; 
    background : #90ADB7 url('images/background.png') repeat-x; 
    font-family: verdana, sans-serif; 
    font-size: 0.85em; 

} 

#wrapper { 
    width: 960px; 
    margin: 0 auto; 
    border-style:solid; 
    padding: 190px 0; 
} 

#formpanel { 
    width: 400px; 
    height: 400px; 
    background-color: yellow; 
    margin: auto; 
} 

#loginForm { 
    margin: auto; 
    width: 50%; 
    height: 50%; 
    background-color:blue; 
}

問題最裏面的div（#loginForm）用外部div的頂邊（＃formpanel）刷新。我應該如何集中內部分區？

截圖 enter image description here

來源

2011-12-07 Rahul

自@ BillyMoon的從2011年的答案是在刪除隊列，這裏是他最初發布的鏈接： http://www.jakpsatweb.cz/css/css-vertical-center-solution.html – royhowie

你可以使用相對定位：

http://jsfiddle.net/a879W/

來源

2011-12-07 14:59:07 ptriek

謝謝。這工作。也感謝jsfiddle。不知道這個工具。 – Rahul

後人：#loginForm {margin：auto; 位置：相對; top：25％; 寬度：50％; 身高：50％; background-color：blue; } – Rahul

#formpanel { 
    position: relative; 
    ... 
} 

#loginForm { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; 
    margin-left: -100px; 
    width: 200px; 
    height: 200px; 
    background-color:blue; 
}

來源

2011-12-07 14:56:40

#loginForm { 
    position:absolute; 
    top:25%; 
    margin: auto; 
    width: 50%; 
    height: 50%; 
    background-color:blue; 
}

編輯：頂部：25％不是50％。

來源

2011-12-07 14:57:08 Jivings

我認爲應該是最高的：25％... – ptriek

不錯，我錯過了。謝謝。 – Jivings

@Jivings，這是行不通的。你確定你的位置：絕對？ – Rahul

您可以使用絕對定位：

#formpanel { 
    width: 400px; 
    height: 400px; 
    background-color: yellow; 
    margin: auto; 
    position:relative; 
} 

#loginForm { 
    position: absolute; 
    width: 200px; 
    height:200px; 
    left: 100px; 
    top: 100px; 
    background-color:blue; 
}

來源

2011-12-07 14:58:56

如果窗口被調整大小？絕對定位對於對中元件沒有好處。 – Jivings

我認爲，由於包裝div有一個固定的寬度，應該沒有必要調整窗口的大小... –

CSS - 如何居中嵌套的div？

回答

相關問題