HTML中将盒子居中的办法

本文介绍: 1.通过 position 定位后用magin负值居中2.通过 position 定位后用transform：translate 居中3.用magin和padding将盒子挤到中心

 .inner {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      background-color: skyblue;
      magin-left:-自身百分之50;
      magin-top:-自身百分之50;
    }

2.通过 position 定位后用transform：translate居中

 .inner {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      background-color: skyblue;
      transform: translate(-50%, -50%);
    }

3.用magin和padding将盒子挤到中心

4.给大盒子4个边，用margin–auto居中

.inner {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }

5.用·flex 布局将元素对齐

.father {
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 设置为flex布局 */
    display: flex;
    /* 主轴水平居中 */
    justify-content: center;
    /* 侧轴垂直居中 */
    align-items: center;
}

.son {
    width: 200px;
    height: 200px;
    background-color: purple;
}