【问题标题】：vertical-align in div with height 100% [duplicate]在高度为 100% 的 div 中垂直对齐 [重复]
【发布时间】：2012-08-17 01:36:39
【问题描述】：

这是我的情况：我正在尝试用两个 DIV 填充整个页面（高度 100%，宽度 50%）。此外，DIV 中的内容要垂直居中对齐。

有没有一种简单的方法可以在不使用 hack 或 javascript 的情况下实现这一目标？

我试过body,html{height:100%;} .mydiv {display:table-cell;height:100%;vertical-align-middle}

但这不起作用......并且使用该代码，我必须以像素而不是百分比指定宽度

【问题讨论】：

这里有这么多问题回答这个话题，请搜索。
不完全是。有些答案是关于使 div 的高度为 100%，有些是关于垂直对齐。让它们共存是我想做的事
CSS 中的高度（除了具有固定尺寸的有限对象）是一场噩梦！我已经尝试了无数次来实现这一点，就在我认为我拥有它的时候......解决方案打破了其他东西。如果有什么办法可以避免这种情况，我建议这样做。

标签： html css

【解决方案1】：

position: absolute;
top: 0;
bottom: 0;

会给你一个填充到 100% 高度的盒子。确保您的 HTML 和 BODY 标签足够大：

html, body {
  height: 100%;
}

【讨论】：

但这让问题回答了一半。垂直对齐问题呢？使用您的代码，即使使用 display:table-cell;vertical-align:middle，内容也不会垂直对齐

【解决方案2】：

你想要这种设计吗？ => Example Fiddle

【讨论】：

【解决方案3】：

Live Demo

我刚刚创建了a jsFiddle，显示了我对解决方案的建议。在这里，我考虑到您希望两个<div>s 分别填充 50% 的宽度和 100% 的高度，并且您希望内容在中间垂直对齐。这是simplified working solution 的源代码。

HTML

<div id="outer">
    <div id="table-container">
        <div id="table-cell">
            This content is vertically centered.
        </div>
    </div>
</div>

CSS

#outer {
    position:absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
}

#table-container {
    height:100%;
    width:100%;
    display:table;
}

#table-cell {
    vertical-align:middle;
    height:100%;
    display:table-cell;
    border:1px solid #000;
}

作为参考，我使用了this tutorial。

【讨论】：

它对我有用！谢谢。