html - 垂直居中两个不同高度的并排文本列

Question

你好，我想得到这样的东西，

更新:图片说明:两条单切线必须等长，双切线也必须相等。为了更大的屏幕，两个文本列之间的距离应该与中心相关。

我尝试使用以下代码来实现此目的，但是当屏幕尺寸发生变化时它会产生问题。

<div style="width: 100%; height: 100%; background: none repeat scroll 0% 0% aqua; margin: 0px; padding: 0px;">
<div style="position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);">
  <div style="float: left; padding-right: 10%;">Some Text Long</div>
  <div style="float: right; padding-left: 10%; border-left: 1px solid red;">Some other long text</div>
</div>
</div>

Answer 1

您可以使用 display:table; 和 display:table-cell; 来垂直居中对齐。并且您还需要将 height:100% 添加到 html 和 body 以及 .containbox 以使框扩展到页面的整个高度:

html,body{
    min-height:100%; 
    height:100%;
    margin:0; 
    padding:0;
}

.containbox{    
    display:table;
    width:100%; 
    height:100%;
 }

.leftbox, .rightbox{ 
    width:50%;
    display:table-cell;
    vertical-align:middle;
    width:50%;
    text-align:center;
    padding:2%;}

.rightbox{
    border-left:1px solid black;
 }

/* Remove comments to use another way to create the divider

.rightbox::before{ 
    content: "|";
    position:absolute;
    left:50%;
}
*/

演示 http://jsfiddle.net/a_incarnati/y2qe494t/3/

在另一个演示中，有一个宽度为 1% 的 div .center 和一个分隔线，因此不会展开整个高度。

DEMO2 http://jsfiddle.net/a_incarnati/y2qe494t/4/