页面上的元素居中，尤其是垂直居中，在过去使用 CSS 很难做到，我们不得不解决许多黑客问题。值得庆幸的是，Flexbox让这一切变得更容易，我们现在可以将我们的设计精力集中在更高层次的问题上。
以下是使用 Flexbox 使元素居中的非常简单的指南。
水平对中
让我们从一个包含两个段落的div开始，我们希望在同一轴上水平居中。就像在容器上使用值为center的justify-content属性一样简单：
啊！
耶！
<div class="box flex">
<p>
<img src="/images/pirate.svg" width="75">
arrr!
</p>
<p>
<img src="/images/cowboy.svg" width="75">
yeehaw!
</p>
</div>
.box.flex {
display: flex;
justify-content: center;
}
.box {
padding: .5rem;
height: 300px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.03);
border-radius: 4px;
color: #84613D;
font-family: "Lucida Console", Monaco, monospace;
background: #FDF9EA;
border-bottom: 1px solid #F9F2D6;
border-right: 1px solid #F9F2D6;
}
.box p {
max-width: 125px;
text-align: center;
background: rgba(255,255,255,0.5);
margin: .25rem;
padding: .25rem;
}
垂直居中
当我们还需要垂直居中元素时，Flexbox 的威力会大放异彩。这是我们的示例，但弹性项目也垂直居中：
.box.flex {
display: flex;
justify-content: center;
align-items: center;
}
啊！
耶！
如果您只想让特定的 flex 项目垂直居中，您可以在项目上设置align-self：
.flex p:last-child {
align-self: center;
}
啊！
耶！
整页垂直居中
如果你想把一个元素放在页面的死点，这可能会有点棘手，因为弹性项目只会根据其容器的高度垂直居中。这意味着容器本身需要与页面本身高度相同。使用视口单位很容易做到，其中100vh是视口高度的 100%。
这是一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dead center!</title>
<style>
body {
margin: 0;
}
.center-me {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<div class="center-me">
<p>😇 Bonjour center!</p>
</div>
</body>
</html>
另请注意，我们确保将页面的边距重置为 0，否则最终会出现一点滚动。
