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

Question

我找到了一些解释，下面是一些，但没有一个有帮助。

垂直对齐文本 垂直对齐

我有一个基于骨架框架构建的网站。经过一些研究以获得我的主页的全屏图像，我想出了以下代码，现在需要将 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>

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

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

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