【前端100问】Q52：怎么让一个 div 水平垂直居中

写在前面

此系列来源于开源项目：前端 100 问：能搞懂 80%的请把简历给我
为了备战 2021 春招
每天一题，督促自己
从多方面多角度总结答案，丰富知识
怎么让一个 div 水平垂直居中
简书整合地址：前端 100 问

正文回答

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

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

div.parent {
  position: relative;
}
div.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 或者 */
div.child {
  width: 50px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -5px;
}
/* 或 */
div.child {
  width: 50px;
  height: 10px;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

div.parent {
  display: grid;
}
div.child {
  justify-self: center;
  align-self: center;
}

div.parent {
  font-size: 0;
  text-align: center;
  &::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
  }
}
div.child {
  display: inline-block;
  vertical-align: middle;
}

div.parent {
  display: flex;
}
div.child {
  margin: auto;
}