Flexbox 元素不居中

Question

我试图练习我的 Flexbox 技能，但我无法将 Flexbox 容器中的某个类居中。它仅在我应用于justify-content: center;容器时居中，但如果我将其应用于孩子，它就不会居中.head1。我也无法使用对齐项目垂直对齐它。即使我在弹性盒容器中使用它，它仍然不会垂直对齐。我也尝试过对齐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-container或将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>