Center container in Jumbotron with Bootstrap 4

Question

I'm currently working on learning front-end web development and I'm trying to learn to use Bootstrap. Under my nav-bar, I have a jumbotron with a blurred image as the background. I currently have it set up so only the image is blurred and not the text; however, I can't figure out how to center the h1 and p vertically.

Image of jumbotron

 .jumbotron-fluid {
  text-shadow: #444 0 1px 1px;
  color: #FFF;
  position: relative;
  height: 40vh;
 }

 .jumbotron-fluid .container-fluid {
  position: relative;
  z-index: 2;
 }

 .jumbotron-fluid .bg {
  background: url("../code.png") top center no-repeat;
  width: 100%;
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  overflow: hidden;
  position: absolute;
  filter: blur(5px);
  top: 0;
  left: 0;
  z-index: 1;
 }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="bg"></div>
 <div class="jumbotron jumbotron-fluid">
  <div class="bg"></div>
  <div class="container-fluid text-center">
   <h1 class="display-4">Welcome!</h1>
   <p class="lead">This site contains various projects I have worked on</p>
  </div>
 </div>

If you're willing to look at Flex Box, you could try a FlexBox vertical alignment -- https://stackoverflow.com/questions/22196587/how-to-center-align-vertically-the-container-in-bootstrap — RoboBear, Jul 01 '18 at 18:36
@RoboBear can't believe I didn't see that while looking for answers. That solved the issue — Jim, Jul 01 '18 at 18:45

score 1 · Answer 1 · answered Jul 01 '18 at 18:48

Managed to fix the issue by adding the flex and center parameter under display and align-items

.jumbotron-fluid {
    text-shadow: #444 0 1px 1px;
    color: #FFF;
    position: relative;
    height: 40vh;

    display: flex;
    align-items: center;
}

Thanks to @RoboBear to pointing out this question

Center container in Jumbotron with Bootstrap 4

1 Answers1