在页面,我们经常需要将一个div水平和垂直上都居中,使用flex该如何实现?

1.代码

// html
<div class="box">
  <div class="point"></div>
</div>
// css
.box {
  width: 200px;
  height: 200px;
  background: #fb3;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box .point {
  width: 100px;
  height: 100px;
  background: #FE3C86;
}

2.核心代码说明

3.总结

• flex的使用