html - 垂直居中到一个div

Question

我遇到了一个问题。例如，我有一个像这样的 div :

<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>

CSS 看起来像这样:

.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;
}

我遇到的问题是我想将 h2 和 p 部分垂直居中，并且它必须响应......现在我尝试使用如下解决方案:

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

但在手机和平​​板电脑上它会产生一些问题..

有什么帮助吗？

提前致谢

Answer 1

你可以像那样使用 flexbox

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>