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

【问题标题】：Vertically center content in a vh height div在 vh 高度 div 中垂直居中内容
【发布时间】：2018-01-20 08:09:12
【问题描述】：

我在下面找到了一些解释，但没有任何帮助。

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

还有代码：

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

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

【问题讨论】：

标签： html css

【解决方案1】：

不要让它太复杂... ;-) 下面的设置将起作用。（我添加了背景颜色来代替背景图片）

.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;
  background: #ddd;
}

.container {
  position: relative;
  height: 100%;
}

.full-head-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

【讨论】：

@G-cyr 就像一个魅力！

【解决方案2】：

您可以使用 display 规则中的 table/table-cell 或 flex

flex

.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;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.full-head-content {
  padding: 50px 0;
}

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

table-cell

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

.fullwidth-header .overlay {
  background-image: url(../images/overlay.png);
  background-repeat: repeat;
  
    display:table-cell;
   vertical-align:middle;
}

.full-head-content {
  padding: 50px 0;
  
    display:table;/* block that shrinks to content size */
    margin:auto;
}

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

【讨论】：

【解决方案3】：

text-align:center 将使您的文本显示在中心，因为您将其宽度设置为 100%。也就是说，如果您希望文本居中而不是左对齐。

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

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

【讨论】：