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