垂直中心内容在一个高度div

Question

我发现了一些解释，在一些下面，但没有帮助。

Vertically Align Text Vertically Align

我必须建立在框架结构一个网站。经过一些关于为我的主页获取全屏图像的研究后，我想出了以下代码，现在需要将该vh高度俯仰的内容水平和垂直居中。任何人都可以帮忙吗？这里是我的screengrab：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

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

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