Элементы Flexbox не центрируются

Question

Я пытаюсь просто практиковать свои навыки во флексбоксе, но я не могу центрировать определенный класс внутри контейнера флексбокса. Он центрируется только тогда, когда я применяю justify-content: center; к контейнеру, но не центрируется, если я применяю его к ребенку, который .head1.

Я также не могу выровнять его по вертикали, используя align-items. Даже если я использую его в контейнере flexbox, он все равно не будет выравниваться по вертикали. Я также пытался выровнять элемент h1, но он также не работал. Что я делаю неправильно ??

РЕДАКТИРОВАТЬ: Чтобы уточнить, я пытаюсь изменить как элемент h1, так и элемент .head1.

body,
html {  
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.flex-container{
display: flex;
justify-content: center;	
}

h3{
/*color: white;*/
color: black;
font-size: 3rem;
}

h1{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
/*color: white;*/
color: black;
font-size: 3rem;	
}

.head1{
}

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
<!-- Your own stylesheet -->
<link rel="stylesheet" type="text/css" href="style.css">

<h1 class ="text-uppercase"><strong>Welcome to the Landing Page</strong></h1>
      
<div class="flex-container">
  <h3 class="head1"> Find out more!</h3>
</div>

Answer 1

Если вы хотите расположить по центру h1 и h3 по вертикали, вам нужно переместить h1 в .flex-container. Примените flex-direction: column, justify-content: center и height: 100% к этому и text-align: center к h1 и h3

body,
html {
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  background: url(header.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

h3 {
  color: black;
  text-align: center;
  font-size: 3rem;
}

h1 {
  color: black;
  font-size: 3rem;
  text-align: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="flex-container">
  <h1 class="text-uppercase"><strong>Welcome to the Landing Page</strong></h1>

  <h3 class="head1"> Find out more!</h3>
</div>

Answer 2

Если я правильно понимаю, вы хотите выровнять .head1 элемент по вертикали. Это можно сделать двумя способами, добавив свойство align-items: center в родительский flex-контейнер или align-self: center в дочерний элемент в flex-container. А также вы должны указать высоту для родительского контейнера. Я надеюсь, что это поможет вам.

body,
html {  
width: 100%;
height: 100%;
font-family: 'Montserrat', sans-serif;
background: url(header.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

.flex-container{
  display: flex;
  justify-content: center;
  height: 100%;
/*   align-items: center;   it's works too*/ 
}

h3{
/*color: white;*/
color: black;
font-size: 3rem;
}

h1{
text-align: center;
color: black;
font-size: 3rem;	
}

.head1{
  align-self: center;
}

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

<!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
<!-- Your own stylesheet -->
<link rel="stylesheet" type="text/css" href="style.css">

<h1 class ="text-uppercase"><strong>Welcome to the Landing Page</strong></h1>
      
<div class="flex-container">
  <h3 class="head1"> Find out more!</h3>
</div>