How to center flex block in center page?

This question already has an answer here:

Flexbox: center horizontally and vertically 8 answers

---

Flex alignment properties apply to the children of a flex container.

So if you have a div with display: flex , and you want to center this div, you make the parent a flex container. Then you can apply flex alignment properties to the 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>

链接地址: http://www.djcxy.com/p/76004.html

上一篇: CSS Flex拉伸不与垂直对齐一起工作

下一篇: 如何将中心页面中的flex块居中？