在另一个 div 中居中一个 div答案

【问题标题】：Center a div inside another div在另一个 div 中居中一个 div
【发布时间】：2012-05-25 03:38:23
【问题描述】：

我正在尝试将一个 div 设置在另一个 div 的中心。

这是html页面：

<body>
<div id="divParent">
    <div id="divHeader" >
        <div id="divHeaderText">
        </div>
    </div>
    <div id="divBody">
    </div>
</div>
</body>

还有这个风格：

#divHeader {
    background-color: #C7C7C7;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    height: 80px;
    margin-bottom: 2px;
}
#divBody {
    background-image: url('images/GradientBackground.png');
    background-repeat: repeat-x;
    height: 300px;
}
#divHeaderText {
    margin: auto;
    width: 90%;
    height: 80%;
    background-color: #00FF00;
}

为什么最小的 div 顶部没有空格？

【问题讨论】：

我问的是垂直居中。

标签： html css

【解决方案1】：

你的问题不清楚。

如果您尝试在#divHeader 中垂直居中#divHeaderText，请尝试添加margin-top: 13px;。

【讨论】：

【解决方案2】：

margin:auto 不适用于垂直对齐。您必须以 px、em 等形式给出准确的数字。在您的示例中，这应该不是问题，因为您知道父容器的高度。

【讨论】：

【解决方案3】：

对于水平居中，您可以在内联元素上使用 text-align:center 或在容器和块级元素上使用设置宽度的 margin:0 auto。

对于文本的垂直居中，您可以将 line-height 属性设置为等于包含 div 的高度。

要使 div 水平居中，您可以应用 margin-top 属性将其间隔到中心。

请注意，设计问题更适合http://www.doctype.com/，因为 SO 主要面向服务器端语言和应用程序编程。

【讨论】：

【解决方案4】：

#divHeaderText {
margin: auto;
width: 90%;
height: 64px; /* 80% of 80px */
margin-top: 8px; /* (80 - 64) / 2 = 8 */
background-color: #00FF00;
}

【讨论】：

你试过了吗？我正在使用 Internet Explorer 8 和 Firefox 3.5.7，但此解决方案不起作用。我正在使用萤火虫，我看到 divHeaderText 在 divHeader 之外。