我正在尝试使用 flexbox 将一些 div 垂直和水平居中，但它没有按预期工作。
这是一张图片，说明了我所拥有的和我所期望的。
代码如下:
<html lang="en">
<body>
<style type="text/css">
body{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
<div>111111</div>
<div>222222</div>
<div>333333</div>
</body>
</html>
编辑
当然，我知道最好将 div 放在一个容器中，这是我首先尝试的方法，但在那种情况下，我最终会得到这样的结果:
如您所见，div 按预期在容器中居中，但容器本身并非如此。
最佳答案
你的代码很好，你应该只添加一个 min-height: 100vh 到 body 这样 div 就可以在视口(viewport)高度居中(body 不会t 总是覆盖视口(viewport)高度，它只需要最小的空间来包含它的 child )
关于html - 使用 flexbox 水平和垂直居中 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31697269/