学习antd 中的垂直居中方式

父元素的伪元素:before + vertical-align: middle; 实现垂直居中方式，加入text-align：center可以实现水平垂直居中

效果图

html

<div className="parent">
    <div className="child"></div>
</div>

css

.parent {
  width: 600px;
  height: 600px;
  background: green;
  margin: 0 auto;
  /*保证水平居中*/
  text-align: center;
}
.parent::before {
  background: yellow;
  /*以下是必要的代码*/
  display: inline-block;
  width: 0;
  height: 100%;
  content: '';
  vertical-align: middle;
}
.child {
  display: inline-block;
  vertical-align: middle;
  /*以上是必要代码*/
  width: 60px;
  height: 60px;
  background: red;
}