如何在中心页面中居flex block？

Question

我的div block属性为flex CSS。

此块具有80％的宽度和50％的显示高度。

如何通过水平和垂直方向在中心显示此块？

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