如何将H4和H1放在背景图像的中间

Question

我有这种情况。html：

https://codepen.io/jt_cerqueira/full/yxolxg/

问题是在头扭曲器div上，有一个背景图像，我尝试将我的H1和H4句子放在背景图像的中间，但我只是不知道该怎么做。当然没有想法。

谁能帮忙？

<div id="headwraper">
    <div class="container-fluid">
     <div class="row">
      <div class="col-sm-6 col-sm-offset-3 col-xs-12">
        <h4>HELLO WORLD, I'M</h4>
        <h1>JT CERQUEIRA</h1>
        <h4>FRONT END WEB DEVELOPER AIMED AT FULL STACK</h4>
      </div>
    </div>
   </div>  
  </div>  

谢谢。

Answer 1

这可能会有所帮助：

只需更改以下内容， padding-top:50px; min-height:770px;。那会。

感谢它是否有效。

Answer 2

请添加下面的CSS，它将在垂直和水平中间添加H1，H4和P标签，我添加了Class Mybox

 <div class="col-sm-6 col-sm-offset-3 col-xs-12 mybox">
        <h4>HELLO WORLD, I'M</h4>
        <h1>JT CERQUEIRA</h1>
        <h4>FRONT END WEB DEVELOPER AIMED AT FULL STACK</h4>
      </div>
.mybox {
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    margin: 0px !important;
    left: 50%;
}

Answer 3

padding-top: 750px;正在向下推下内容。我尝试将其删除并将其添加到您的#headwrapper中。

display: flex;
flex-direction: column;
justify-content: space-around;