html - 我如何垂直对齐超大屏幕中心的文本？

Question

我正在尝试将文本垂直对齐到我的超大屏幕的中心，但我之前使用的涉及绝对定位和顶部和底部 50% 的代码似乎不适用于此

这是我的html

<div class="jumbotron">
    <div class="container">
        <h1 class="text-center"><span class="first">UZER</span><span class="last">JAMAL</span></h1>
        <p class="text-center" id="respon">Responsive web designer</p>
        <p class="text-center" id="langs">HTML - CSS - BOOTSTRAP - JQUERY</p>
    </container>
</div>

和CSS

.jumbotron{
height:100vh;
background:url('./Images/Jumbo.jpg') no-repeat center;
-webkit-background-size: cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
width:100%;
position:absolute;
top:0;
z-index:-100;
}

h1{
margin-bottom: -0.7em;
}
h1 .first{
color:white;
font-family:secretcode;
font-size:2em;
}

h1 .last{
color: #bd902e;
font-family:aku;
font-size:1.7em;
}

.jumbotron #respon{
font-family:geosans;
color:white;
font-size:4em;
margin-bottom:-0.2em;
}

.jumbotron #langs{
font-family:geosans;
color:#bd902e;
font-size:2em;
}

还有没有办法在不使用负边距的情况下使 h1 和 p 垂直相互靠近？我不认为使用 -0.7em 是正确的方法

代码 Jsfiddle.net

Answer 1

试试这个

.jumbotron{
    height:100vh;
    background:url('./Images/Jumbo.jpg') no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    width:100%;
    position:absolute;
    top:0;
    z-index:-100;
    display:flex;
    display-direction:column;
    justify-content:center;
    align-items:center;
 }