带有Bootstrap 4的Jumbotron中的中心容器

Question

我目前正在学习前端Web开发，并且正在尝试学习使用Bootstrap。在我的导航栏下，我有一个以模糊图像为背景的巨型飞船。我目前已经设置好了，因此仅图像模糊而不是文本模糊；但是，我不知道如何将h1和p垂直居中。

巨无霸图像

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

Answer 1

通过在显示和对齐项下添加flex和center参数来解决该问题

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

    display: flex;
    align-items: center;
}

感谢@RoboBear指出subrule