利用子元素绝对定位，left设置父元素的50%向右，再利用transform向右偏移自身的-50%（即左移自身的50%）

<div class="parent">
  <div class="child">
    子元素div
  </div>
</div>

.parent {
  width: 100%;
  height: 100%;
  background-color: #ccc;
  position: relative;
}

.child {
  width: 200px;
  height: 200px;
  background-color: red;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

注：上下居中以此类推，使用：

top: 50%;
transform: translateY(-50%);