在vh高度div中垂直居中内容

Question

我发现了一些解释，但有些解释，但没有一个有帮助。

Vertically Align Text Vertically Align

我有一个基于骨架框架的网站。在为我的主页获得全屏图像的一些研究之后，我想出了以下代码，现在需要水平和垂直地将该高度潜水的内容居中。有人可以帮忙吗？这是我的screengrab：http://prntscr.com/g7bz5h

代码：

＆＃13;

＆＃13;

.fullwidth-header {
  background-image: url(../images/Risk-Home.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover !important;
  height: 85vh;
}

.fullwidth-header .overlay {
  background-image: url(../images/overlay.png);
  background-repeat: repeat;
  height: 85vh;
}

.full-head-content {
  padding: 50px 0;
  vertical-align: middle;
  width: 100%;
  display: inline-block;
  height: 50%;
  position: absolute;
  top: 50%;
  bottom: 0%;
  margin: auto;
}

＆＃13;

<div class="sixteen columns fullwidth-header">
  <div class="overlay">
    <div class="container">
      <div class="full-head-content center center">
        ACCESS TO PROFESSIONAL<br /><br /> Bankers
        <br /> Risk Management Specialists<br /> Financial Managers
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

text-align:center会使您的文字显示在中心，因为您给它的宽度为100％。也就是说，如果您希望文本与中心对齐而不是左对齐。

＆＃13;

＆＃13;

.fullwidth-header {
  background-image: url(../images/Risk-Home.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover !important;
  height: 85vh;
}

.fullwidth-header .overlay {
  background-image: url(../images/overlay.png);
  background-repeat: repeat;
  height: 85vh;
}

.full-head-content {
  padding: 50px 0;
  vertical-align: middle;
  display: inline-block;
  height: 50%;
  width:100%;
  text-align:center;
  position: absolute;
  top: 50%;
  bottom: 0%;
  margin: auto;
}

＆＃13;

<div class="sixteen columns fullwidth-header">
  <div class="overlay">
    <div class="container">
      <div class="full-head-content center center">
        <div class="content">
          ACCESS TO PROFESSIONAL<br /><br /> Bankers
          <br /> Risk Management Specialists<br /> Financial Managers
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;