Center vertically into a div

Question

I'm facing an issue. I have, for example a div like this :

<div class="container-fluid">
    <div class="row restaurant">
        <div class="col-md-6">
            <h2>
                Le restaurant
           </h2>
        </div>
        <div class="col-md-6">
            <p>
                Some text
            </p>
        </div>
    </div>

The CSS 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;
}

The problems I have is that I want to center vertically the h2 and the p part, and it has to be responsive... for now I try with a solution like :

margin-top:34%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);

But on mobile and tablet it makes some shit..

Any help ?

Thanks in advance

Answer 1

You could use flexbox like that

html {
  margin:0;
}

.restaurant{
    height: 100vh;
    background: url("../imgs/restaurant.jpg") no-repeat center center fixed;
    background-size: cover;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    min-height: 24em;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center
}

.restaurant h2{
    font-family: 'brownhill', serif;
    text-align: center;
    font-size: 100px;
    margin:0;
}

.restaurant p{
    font-family: 'minaxi', serif;
    text-align: justify;
    font-size: 18px;
    line-height: 23px;
    margin:auto;
}

<div class="container-fluid">
    <div class="row restaurant">
    <div class="headline">
        <div class="col-md-6">
            <h2>
                Le restaurant
           </h2>
        </div>
        <div class="col-md-6">
            <p>
                Some text
            </p>
        </div>
       </div>
    </div>