我试图重新创建这个＆＃34;中间居中的文字＆＃34;例如，＆＃34;响应式前端开发＆＃34;在this site。由于我是网络开发人员的新手，我寻找了一些模板，所以我可以有一个开始。我找到了两种方法＆＃34;要做到这一点，但我不知道如何衡量哪个更好，或者即使有更好/更快（性能）的方式。
ps：我在我的项目中使用Bootstrap，所以无论如何我需要<link>它的CSS。
Bootstrap的Jumbotron方法
.jumbotron {
background-color: transparent !important;
margin-top: 190px;
}<html>
<head>
<meta charset="utf-8">
<title>Bootstrap's jumbotron method</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="jumbotron">
<div class="container text-center">
<h1>My Centered Text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
</body>
</html>
CSS方法
html, body {
height: 100%;
}
.site-wrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS method</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div class="site-wrapper">
<div class="text-center">
<h1>My Centered Text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
</body>
</html>
提前致谢，
路易斯。
答案 0 :(得分：0)
使用flexbox有一种更好的方法。它是目前公认的实现垂直居中的标准。基于表格的方法不够灵活。你可以做到
.site-wrapper {
display: flex;
align-items: center; //horizontal center
justify-content: center; //vertical center
}
您也不需要.site-wrapper-inner课程。看看这个：Codepen
这也是因为它比.jumbotron更好的原因是因为bootstrap jumbotron是出于特定目的。特别是网页上的大欢迎文本。在任何需要垂直居中的地方使用jumbotron都不是一个好主意。