使用Flexbox，我们可以轻松地在给定的容器内垂直和水平地对齐任何元素或元素，该容器可能具有图像背景来实现结果，如上图所示。
我们的目标是将一组标题和一个按钮放在两个轴心的中央。我们还希望这个容器水平和垂直地占据整个视口。
无需为此使用position属性，也无需计算任何边距或桨式才能获得这些结果。
相反，我们将使用Flexbox，并将图像添加为background-image。使用这种方法，视口的大小可以朝任何方向更改，但是我们的标题和按钮始终在水平和垂直方向上始终位于中心。
让我们看看代码示例。
html
在HTML中，我们希望拥有一个具有我们要居中的元素的容器。例如：
<section id='splash-screen'>
<h1>Dear Beer: local beer shop</h1>
<h2>We serve it cold!</h2>
<button>Discover our beer</button>
</section>
不需要img，因为我们将添加图像作为背景。否则，我们将不得不使用position在其顶部移动元素。
CSS
在CSS中，我们将：
- 将图像设置为整个容器的背景（带有ID
splash-screen的section元素） - 将背景图像与
background-position中心 - 确保将其调整大小以使用
background-size占所有空间并防止使用background-repeat重复 - 将本节的高度设置为
100vh和100vw占据整个视口空间 - 使本节
flex，与justify-content水平的中心项目，并垂直使用align-items
#splash-screen {
/* setting height and width */
min-height: 100vh;
width: 100vw;
/* adding background image */
background-image: url("https://barcelonacodeschool.com/files/pics/blog_posts/beer_taps.jpg");
/* assign the center of the image to be in the center of the container */
background-position: center;
/* prevent repeating or tiling of the image */
background-repeat: no-repeat;
/* resize image to take all the space */
background-size: cover;
/* fix the image to prevent scrolling for some extra nice parallax effect */
background-attachment: fixed;
/* make section flex */
display:flex;
/* vertically center elements */
align-items: center;
/* horizontally center elements */
justify-content: center;
/* align element to the center within their position */
text-align: center;
/* make text white */
color: white;
}
现在我们将获得以下结果：
这些元素在水平和垂直方面都居中，但是正如我们可以看到的那些标题和一个按钮时，所有元素都是内联的。这就是Flexbox的工作方式，通过制作一个容器flex，我们将所有子元素都与Web开发的默认Flex方向相同。
如果我们在Flex容器中只有一个元素，那不是问题，但是对于多个元素，我们需要做额外的步骤。
我们需要将这3个元素视为一个元素，因此我们需要将它们包裹在容器中。
让我们相应地更改html：
<!-- section is now flex -->
<section id='splash-screen'>
<!-- wrap headings and button into a container -->
<div>
<h1>Dear Beer: local beer shop</h1>
<h2>We serve it cold!</h2>
<button>Discover our beer</button>
</div>
</section>
etvoilã！我们有！
现在，如果我们要调整浏览器大小并更改视口的大小，这些元素仍将完全位于中心！
要删除周围的白色空间，请记住要摆脱来自浏览器内置样式的
body的默认利润：
body {
margin:0;
}