技術標籤：前端csshtml

題目：子盒子在父盒子裡居中對齊

一：父盒子加相對定位，子盒子加絕對定位實現。

程式碼：
1.定義父盒子與子盒子：

 <div class="jz">
      <div class="jz2">
      </div>
  </div>

2.css樣式實現子盒子居中對齊：

 .jz{
      position: relative;
      height: 500px;
      width: 500px;
      background-color: rgb(24, 24, 24);
    }
    .jz2{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      height: 100px;
      width: 100px;
      background-color: rgb(8, 12, 241);
    }
 

關鍵：
position: xxxxx; 定位屬性
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

效果：