在 CSS 中使对象居中的最佳方法（水平和垂直）

在本文中，我将向您展示如何通过三种不同的方式在 CSS 中水平和垂直居中对象。

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

IE 不支持此方式

.parent {
  display: grid;
  place-items: center;
}

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

@mrdanielschwarz提及

.parent {
  display: flex or grid;
  height: 100vh;
}
.child {
  margin: auto;
}

您更喜欢哪种方式？您知道其他方式吗？