html - 垂直集中内联 block 中的内容

Question

我试图让蓝色文本垂直位于行内 block div 的中心。我尝试了各种变体，但无济于事。父级必须保留为内联 block 。

如果父级显示为 table 并且子级显示为带有 vertical-align: middle 的表格单元格，那么它几乎可以工作，但失败了，因为子级 div 是100% 高，我想添加一个 border-top 和带有大约 10px 填充的底部，这在 100% 高度下不起作用。不能使用 display:flex 因为它会破坏其他元素的定位。行高也失败。

谁能解释一下这里的问题是什么，因为我很困惑。

.matches-container {
  padding-top: 50px;
}

.match {
  width: 25%;
  height: 250px;
  display: inline-block;
  border: 1px solid yellow;
}

.match-contents {
  background: blue;
  border-top: 1px solid red;
  border-bottom: 1px solid red;
}

.a {
  background: black
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<section class="matches-container">
  <article class="match a">
    <div class="match-contents">central text with borders top and bottom</div>
  </article>
  <!-- -->
  <article class="match b">
    <div class="match-contents">central text with borders top and bottom</div>
  </article>
</section>

Answer 1

将此属性添加到 .match-contents

.match-contents {
    position:relative;
    top:50%;
    transform:translateY(-50%);
}

您的代码按预期工作...没有添加属性以使蓝色框垂直居中。

这是片段。

.matches-container {
    padding-top: 50px;
}

.match {
    width: 25%;
    height: 250px;
    display: inline-block;
    border: 1px solid yellow;
}

.match-contents {
    background: blue;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
	
	
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.a {
    background: black
}

<section class="matches-container">
    <article class="match a">
        <div class="match-contents">central text with borders top and bottom</div>
    </article>
    <!--
            
            -->
    <article class="match b">
        <div class="match-contents">central text with borders top and bottom</div>
    </article>
</section>