Explanation
In an attempt to replicate the "middle centered text" feature, such as "Responsive Front-end Development," on this website, I am currently exploring various methods. As a newcomer to web development, I have searched for templates to provide me with a starting point. Among the different approaches I found, I am uncertain about which one is more efficient or offers better performance.
It is worth mentioning that my project involves using Bootstrap, so incorporating its CSS is necessary.
Code
Bootstrap's Jumbotron method
.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 method
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>Your help and advice are highly appreciated.
Luiz.