Vertically centralising content in an inline-block - html

Question

I’m trying to get the blue text vertically in the centre of the inline-block divs. I’ve tried various variations but to no avail. The parent must stay as an inline block.
If the parent is displayed as a table and child as a table cell with vertical-align: middle then it almost works, but fails because then the child div is 100% high, and I want to add a border-top and bottom with about 10px padding, which won’t work at 100% height. Cannot use display: flex because it destroys the positioning of other elements. Line height also fails.
Can someone explain what the problem is here because I'm very confused.
.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

Add this properties in .match-contents
.match-contents {
position:relative;
top:50%;
transform:translateY(-50%);
}
Your code is working as expected...no where you added a property to make blue box vertically center.
Here is snippet.
.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>

Answer 2

You can use display: inline-flex and align-items: center here. Demo:
.matches-container {
padding-top: 50px;
}
.match {
width: 25%;
height: 250px;
/* become inline flex-container */
display: inline-flex;
/* center items */
align-items: center;
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>