垂直中心內容在一個高度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>