Safari and bootstrap 4 flexbox error - html

Question

Bootstrap 4 - Safari Version 10.1.2 display:table; and display:table-cell; vertical-align:center; not working on a 100% height div.
<div class="test-slider">
<div class="slide">
<div class="row no-gutters">
<div class="col-12 col-xs-12 col-sm-12 col-md-7 col-lg-7">
<img src=""/>
</div>
<div class="col-12 col-xs-12 col-sm-12 col-md-5 col-lg-5">
<div style="display:table; height:100%;">
<div style="display:table-cell; vertical-align: middle;">
<h2>Test center</h2>
<p>Should be centered</p>
</div>
</div>
</div>
</div>
</div>
</div>
If I render in chrome the height is inherited from the .test-slider class that has a fixed height whilst in safari it takes the contents height rather than filling the height of the div. Any ideas? I am using slick slider.

Answer 1

Well, currently I have Safari 11.0.1, but if I set the below stlye, it does center the text vertically to me.
.test-slider .row {
height: 500px;
}
Setting the height only to .test-slider is not enough, since the children do not know that they should fill in that height. The 100% height set on the "table" is calculated from the height of it's parent, the .col-md-5 div. Which, in your case does not know about the height of the .test-slider.
Other than that, please note that col-12 col-xs-12 col-sm-12 col-md-7 col-lg-7 is totally equivalent to simply writing col-md-7. The same stands for col-md-5 of course.
Also, instead of using tables, I would recommend to use the flexbox utility classes already available in Bootstrap. That makes the markup lighter. This is an example:
.test-slider .row {
height: 300px;
}
.test {
background-color: lightgray;
}
<div class="test-slider">
<div class="slide">
<div class="row no-gutters">
<div class="col-md-7">
<img src=""/>
</div>
<div class="test col-md-5 d-flex align-items-center">
<div>
<h2 class="mb-0">Test center</h2>
<p class="mb-0">Should be centered</p>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">