Html 垂直对齐，垂直高度为100%

我的情况是这样的：我试图制作一个有两个分区的页面，填充整个页面（高度100%，宽度50%）。此外，div中的内容要垂直对齐到中间

有没有一种不用黑客或javascript就能轻松实现的方法

我尝试了

body，html{height:100%；}.mydiv{display:table cell；height:100%；vertical align middle}

但这是行不通的……对于代码，我必须以像素为单位指定宽度，而不是百分比

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

将为您提供一个填充到100%高度的框。确保HTML和正文标记足够大：

html, body {
  height: 100%;
}

---

您想要这种类型的设计吗？=>

我只是提出了一个解决方案来展示我的建议。在这里，我考虑到你想要两个<代码> <代码> s，填充每个宽度的50%，100%的高度，并且希望内容在中间垂直对齐。下面是源代码的示例

HTML

---

作为参考，我使用了。

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

display:table单元格对齐，内容也不会垂直对齐；垂直对齐：中对齐

对我有效！谢谢

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

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