css - 如何使 flex block 在中心页面居中？

Question

我有div block有属性(property)flex CSS。

该 block 的显示宽度为 80%，高度为 50%。

如何让这个 block 水平和垂直居中显示？

Answer 1

Flex 对齐属性适用于 Flex 容器的子级。

因此，如果您有一个带有 display: flex 的 div，并且您想要使该 div 居中，则可以将父级设为 Flex 容器。然后您可以将 Flex 对齐属性应用到 div。

div {
  display: flex;
  width: 80%;
  height: 50vh;
  border: 1px solid black;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

<div></div>

这里有更完整的解释:https://stackoverflow.com/a/33049198/3597276