使组件或者 div 居中的 4 个方法

• Flexbox
• Margin auto a flex item
• Grid
• Position

/* Flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Margin auto a flex item */
.parent {
  display: flex;
}

.child {
  margin: auto;
}

/* Grid */
.parent {
  display: grid;
  justify-content: center;
  align-content: center;
}

/* use position */
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 100%;
  left: 100%;
  transform: translate(-50%, -50%);
}