将边框保持在父母的高度，同时垂直居中子项

Question

我想在我的列之间有一个始终保持相同高度的垂直分隔线，无论它的列有多少换行符。我为此使用border-left，它很方便，因为当右侧没有列时它就消失了。

同时，我希望每列内容都垂直居中。我曾经通过添加自动边距来居中，但这删除了一点边框。

有没有人知道如何在不添加 CSS 的情况下将这两个要求(垂直中心内容 + 相同的垂直分隔符高度(放在一起 - 只是使用 Bootstrap 4 类？

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<p>
#1 Border correct, but content not vertically centered:
</p>
<div class="container">
<div class="row">
<div class="col">
1 of 2
<br>
hihi
<br>
hihi
</div>
<div class="col border-left border-dark d-none d-md-block">
2 of 2
</div>
<div class="col border-left border-dark d-none d-md-block">
2 of 2
<br>
hihi
</div>
</div>
</div>
<p>
#2 Border too short, but content vertically centered:
</p>
<div class="container">
<div class="row align-items-center">
<div class="col">
1 of 2
<br>
hihi
<br>
hihi
</div>
<div class="col border-left border-dark d-none d-md-block">
2 of 2
</div>
<div class="col border-left border-dark d-none d-md-block">
2 of 2
<br>
hihi
</div>
</div>
</div>

- 如果看不到 3 列，最好将代码段展开到整页 -

Answer 1

当您使用Display flex时，块会移动到内联块位置。这就是边框大小发生变化的原因。我在第一列中使用了border-right属性来获取所需的图像，并在要居中的第二列中使用了align-self-center属性。这就是您的问题似乎如何解决的方式。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<p>
#1 Border correct, but content not vertically centered:
</p>
<div class="container">
<div class="row">
<div class="col border-right border-dark">
1 of 2
<br>
hihi
<br>
hihi
</div>
<div class="col align-self-center d-none d-md-block">
2 of 2
</div>
<div class="col border-left border-dark d-none d-md-block">
2 of 2
<br>
hihi
</div>
</div>
</div>
<p>
#2 Border too short, but content vertically centered:
</p>
<div class="container">
<div class="row h-100 ">
<div class="col border-right border-dark">
1 of 2
<br>
hihi
<br>
hihi
</div>
<div class="col align-self-center border-dark d-none d-md-block ">
2 of 2
</div>
<div class="col border-left border-dark d-none d-md-block">
2 of 2
<br>
hihi
</div>
</div>
</div>