CSS 垂直水平置中

垂直水平置中

<div class="outer">

  <div class="inner"> </div>

</div>

.outer {
  width: 200px;
  heieght: 200px;
  background: rgb(2, 186, 192);
}

inner {
    width: 50px;
    height: 50px;
    background: burlywood;
}

一、flex 作法

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

二、absolute 絕對定位作法

.outer {
  position: relative;
}

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

三、flex、margin 作法

.outer {
  position: relative;
}

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