No.52: 垂直水平居中

绝对定位+transform(translate)

.outer{
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  position: relative;
}
.inner{
  width: 50px;
  height: 50px;
  background-color: #ff0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

绝对定位+trbl0+margin: auto

.outer{
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  position: relative;
}
.inner{
  width: 50px;
  height: 50px;
  background-color: #ff0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin:auto;
}

flex+jcc+aic

.outer{
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inner{
  width: 50px;
  height: 50px;
  background-color: #ff0;
}

flex+margin:auto

.outer{
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  display: flex;
}
.inner{
  width: 50px;
  height: 50px;
  background-color: #ff0;
  margin: auto;
}

grid + margin:auto

.outer{
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  display: grid;
}
.inner{
  width: 50px;
  height: 50px;
  background-color: #ff0;
  margin: auto;
}

grid + jsc + asc

.outer{
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  display: grid;
}
.inner{
  width: 50px;
  height: 50px;
  background-color: #ff0;
  justify-self: center;
  align-self: center;
}