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和h3body,html {&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; font-family: 'Montserrat', sans-serif;&nbsp; background: url(header.jpg) no-repeat center center fixed;&nbsp; -webkit-background-size: cover;&nbsp; -moz-background-size: cover;&nbsp; -o-background-size: cover;&nbsp; background-size: cover;}.flex-container {&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; justify-content: center;&nbsp; height: 100%;}h3 {&nbsp; color: black;&nbsp; text-align: center;&nbsp; font-size: 3rem;}h1 {&nbsp; color: black;&nbsp; font-size: 3rem;&nbsp; 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">&nbsp; <h1 class="text-uppercase"><strong>Welcome to the Landing Page</strong></h1>&nbsp; <h3 class="head1"> Find out more!</h3></div>

Answer 2

如果我理解正确，您想要垂直对齐.head1元素。您可以通过两种方式来完成此操作，将属性 align-items: center添加到父flex-container或将align-self: center添加到flex-container中的子元素。而且您还必须指定父容器的高度。我希望这可以帮助你。body,html {&nbsp;&nbsp;width: 100%;height: 100%;font-family: 'Montserrat', sans-serif;background: url(header.jpg) no-repeat center center fixed;&nbsp;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;}.flex-container{&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; height: 100%;/*&nbsp; &nbsp;align-items: center;&nbsp; &nbsp;it's works too*/&nbsp;}h3{/*color: white;*/color: black;font-size: 3rem;}h1{text-align: center;color: black;font-size: 3rem;&nbsp; &nbsp;&nbsp;}.head1{&nbsp; 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">&nbsp; &nbsp;&nbsp;<!-- Your own stylesheet --><link rel="stylesheet" type="text/css" href="style.css"><h1 class ="text-uppercase"><strong>Welcome to the Landing Page</strong></h1>&nbsp; &nbsp; &nbsp;&nbsp;<div class="flex-container">&nbsp; <h3 class="head1"> Find out more!</h3></div>