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

你好，我正在试着得到这样的东西，

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

我尝试使用以下代码来实现这一点，但当屏幕大小发生变化时，会产生问题

<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>

有些文字很长
其他一些长文本

使用此HTML

<div class="containbox">
  <div class="leftbox">Some Text Long</div>
  <div class="rightbox">Some other long text</div>
</div>

请不要使用内联CSS，这是一种非常糟糕的做法，请使用类名

---

你可以

我想你需要的是这个。在中，我使用此规则均匀地分隔列，然后使边框显示在除第一列之外的所有列上：

div {
  box-sizing: border-box;
  position: relative;
}

.col {
  display: inline-block;
  vertical-align: middle;
  border-left: 1px solid #000;
  height: 100%;
  padding: 20px 3%;
}

.col:first-of-type {
  border-left: none;
}

.col-2 .col {
  width: 44%;

}

以下是html：

<div class="col-wrapper col-2">
  <div class="col">Text</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
</div>

---

您可以使用显示：表格和显示：表格单元格以垂直居中对齐。 您还需要将高度：100%添加到html和正文以及.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%;
}
*/

演示

在另一个演示中，有一个1%宽度的分割中心，带有一个分割器，这样就不会扩展到整个高度

---

DEMO2

感谢您的回复，我在浏览器中编写了该代码，所以。。。还有一件事，我希望文本在屏幕的绝对垂直中心，并从中心填充，因为它在高分辨率机器上看起来很奇怪。让我知道这是否是你们想要的，检查我的答案。谢谢@alex。这就是我想要的谢谢@walter！只是在代码中做了一些更改，得到了我所需要的东西！：）

.panel {
  position: absolute;
  width: 400px;
  margin-left: -200px;
  left: 50%;
}

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%;
}
*/