css - 在可变高度 div 内垂直居中

Question

我将一个页面从中间分成两个垂直列，#split-left 和#split-right。每列占页面宽度的 50%。

如果字段数发生变化，左栏中的联系表单的高度可能会发生变化。

在右侧，我想让#split-right 的高度与#split-left 的高度相匹配，并且文本垂直居中。

关于如何做到这一点有什么想法吗？

谢谢!

Answer 1

#regular-page { display: table; }
#split-left { display: table-cell; width: 50%; }
#split-right {
    display: table-cell;
    width: 50%;
    vertical-align: middle;
    background-color: #F7F7F7;
}

布局在移动 View 中中断。您可以删除 #content { width: 320px; } 但仍然中断。