我如何在超大字体的中心垂直对齐文本？

Question

I'm trying to vertically align the text in the center of my jumbotron but the code i previously used which involved absolute positioning and 50% from top and bottom doesn't seem to work for this

Here is my 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>

and 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;
}

Also is there a way to bring the h1 and p vertically closer to each other without using negative margin? I don't think using -0.7em is the right way to do it

Code Jsfiddle.net

Answer 1

Try This

.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;
 }

Answer 2

You can do it with top:50% and transform: translate(-50%, 0) css property

.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: 50%;
  transform: translate(-50%, 0);
  z-index: -100;
}

Example : https://jsfiddle.net/zhuv5ukb/1/

Answer 3

line-height:0是我想要的。