垂直对齐嵌套的 div答案

【问题标题】：Vertically align a nested div垂直对齐嵌套的 div
【发布时间】：2015-09-21 19:39:05
【问题描述】：

我一直在寻找解决此问题的方法。我尝试了很多方法，包括表格单元格、top:50%、给容器一个固定的高度并尝试将 div 1 居中...如果不弄乱 2 个内部 div 的大小，就没有任何效果。

我不希望它与视口宽度相关，因为页面的背景将是固定图像，我希望徽标位于图像上方的固定位置，但我的解决方案'已经尝试（前 50% 等）使徽标居中，无论视口的大小如何。我猜这里我需要在身体上设置一个固定的高度，但我不确定。有什么想法吗？

<body>
<div id="logowrap">
    <div id="outerlogo">
        <div id="innerlogo">LOGOHERE</div>
    </div>
</div>
</body>

CSS：

#logowrap{
    margin: auto;
    display: block;
    width:300px;
}

#outerlogo{
    background-color: rgba(255,255,255,0.9);
    border: 2px solid #656565;
    position: absolute;
    display: table; 
    width: 250px;
    height: 50px;
    padding: 20px;
}

#innerlogo{
    background-color: rgba(255,255,255,1);
    border: 2px solid #656565;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    padding: 30px;
    font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
}

【问题讨论】：

Jsfiddle 这个请...
一切正常，我检查了你的代码，一切都完美对齐
jsfiddle.net/56hbevke 这不是您要找的吗？不明白你遇到的问题。你能澄清一下吗？
在我看来，您正在尝试将元素与背景图像对齐...对吗？如果我们没有图像，我们如何提供帮助？可能需要带有图像的演示。
对不起，我不敢相信我没有真正说明我想要达到的目标。我只是试图将带有文本徽标的 div 居中到屏幕的中心。它水平居中，但不是垂直居中。

标签： html css alignment vertical-alignment

【解决方案1】：

#logowrap {
    width:300px;
    height:130px;
    position:fixed;
    top:50%;
    left:50%;
    margin-top:-65px;
    margin-left:-150px;
}
#outerlogo {
    background-color: rgba(255, 255, 255, .9);
    border: 2px solid #656565;
    position: absolute;
    display: table;
    width: 250px;
    height: 50px;
    padding: 20px;
}
#innerlogo {
    background-color: rgba(255, 255, 255, 1);
    border: 2px solid #656565;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    padding: 30px;
    font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
}

<body>
    <div id="logowrap">
        <div id="outerlogo">
            <div id="innerlogo">LOGOHERE</div>
        </div>
    </div>
</body>

试试这个。内部 div 尺寸是用 px 指定的，因此固定 #logowrap 尺寸不会破坏任何东西。如果这是您正在寻找的内容，请 +1 并接受。如果没有，请发表评论。

【讨论】：

您好，抱歉，我正在尝试将徽标垂直居中。它已经水平居中，但如果格式变得非常奇怪，我无法将它放到页面中间。感谢您的意见
使用提供的代码，它也垂直对齐（参见全页模式下的 sn-p），而不仅仅是水平对齐。