绝对定位与 transform

// 当要居中的元素不定宽和定高时，我们可以使用 transform 来让元素进行偏移。

.container {
  position: relative;
  width: 300px;
  height: 200px;
  border: 1px solid #333333;
}
.content {
  background-color: #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
}