I have encountered an issue where I am trying to center vertically the content within a div. Here is an example of the structure:
<div class="container-fluid">
<div class="row restaurant">
<div class="col-md-6">
<h2>
The Restaurant
</h2>
</div>
<div class="col-md-6">
<p>
Some text
</p>
</div>
</div>
The CSS styling for the .restaurant class looks like this:
.restaurant{
height: 68vh;
background: url("../imgs/restaurant.jpg") no-repeat center center fixed;
background-size: cover;
}
.restaurant h2{
font-family: 'brownhill', serif;
text-align: center;
font-size: 100px;
color:white;
margin-bottom: 50px;
}
.restaurant p{
font-family: 'minaxi', serif;
text-align: justify;
font-size: 18px;
line-height: 23px;
color:white;
width:70%;
margin:auto;
}
I have attempted to center the h2 and p elements vertically by using the following solution:
margin-top:34%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
However, this method does not work well on mobile and tablet devices. Can anyone provide assistance or suggestions on achieving vertical centering in a responsive manner? Thank you in advance.