CSS - 如何使嵌套的 div 居中？答案

【问题标题】：CSS - How to center nested divs?CSS - 如何使嵌套的 div 居中？
【发布时间】：2012-01-15 01:58:29
【问题描述】：

CSS 新手。

我正在尝试使用下面的代码将嵌套的 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) 的顶部边缘齐平。我应该如何将内部 div 居中？

截图

【问题讨论】：

由于@BillyMoon 2011 年的回答在删除队列中，这是他最初发布的链接：jakpsatweb.cz/css/css-vertical-center-solution.html

标签： css html centering

【解决方案1】：

你可以使用相对定位：

http://jsfiddle.net/a879W/

【讨论】：

谢谢。这行得通。也感谢jsfiddle。不知道这个工具。
为后代：#loginForm { 边距：自动；位置：相对；最高：25%；宽度：50%；高度：50%；背景颜色：蓝色； }
非常感谢！当宽度 100% 呢？

【解决方案2】：

#formpanel {
    position: relative;
    ...
}

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

【讨论】：

【解决方案3】：

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

编辑：顶部：25% 而不是 50%。

【讨论】：

不错，我错过了。谢谢。
@Jivings，这不起作用。你确定 position:absolute 吗？
抱歉，您还需要包含组件的相对位置。

【解决方案4】：

//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代码（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>

【讨论】：

【解决方案5】：

你可以使用绝对定位：

#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;
}

【讨论】：

如果调整窗口大小？绝对定位不利于组件居中。
我认为，由于包装器 div 具有固定宽度，因此不需要调整窗口大小...