Html CSS - 如何将嵌套的 div 居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8417314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - How to center nested divs?
提问by Rahul
New to CSS.
CSS 新手。
I am trying to center nested divs using the code below
我正在尝试使用下面的代码将嵌套的 div 居中
HTML
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
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;
}
the problem is that the innermost div (#loginForm) flushes with the top edge of the outer div (#formpanel). How should I center the inner div ?
问题是最里面的 div (#loginForm) 与外部 div (#formpanel) 的顶部边缘齐平。我应该如何将内部 div 居中？
Screenshot
截屏
采纳答案by ptriek
回答by U-DON
#formpanel {
position: relative;
...
}
#loginForm {
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
width: 200px;
height: 200px;
background-color:blue;
}
回答by Jivings
#loginForm {
position:absolute;
top:25%;
margin: auto;
width: 50%;
height: 50%;
background-color:blue;
}
EDIT: top: 25% not 50%.
编辑：顶部：25% 不是 50%。
回答by Kristian Hildebrandt
You can use absolute positioning:
您可以使用绝对定位：
#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;
}
回答by Yoginee
//CSS code (index.css)
//CSS代码（index.css）
.outer{
position: relative;
height: 500px;
width: 500px;
background-color: aqua;
margin: auto;
}
.middle{
position: absolute;
height: 300px;
width: 300px;
background-color: blue;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.inner{
position: absolute;
height: 100px;
width: 100px;
background-color: fuchsia;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
//html code (index.html)
//html代码（index.html）
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="outer">
<div class="middle">
<div class="inner"></div>
</div>
</div>
</body>
</html>
