【網頁切版】置中 transform： translate(-50%, -50%);

.gray{
  position: relative;
  border: 1px solid black;
  width: 400px;
  height: 200px;
  margin: 0 auto;
  background-color: rgb(247, 243, 243);
}

.red {
  position: absolute;
  width:100px;
  height: 100px;
  border: 1px solid red;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.blue {
  position: absolute;
  width:100px;
  height: 100px;
  border: 1px solid blue;
  top:50%;
  left: 50%;
}

• 會以左上角那點為50%的定位點，因此用 transform: translate(-50%, -50%) 是為了讓div往左、上偏移50%。
• position: absolute 會去抓外層的relative父元素做定位

​