css盒子居中方法总结

方法一

使用margin

利用外边距将子盒子挤到大盒子的中间位置

缺点是大盒子的大小变化了,子盒子就无法实现居中,需要计算同步修改子盒子的外边距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.father {
    width: 500px;
    height: 300px;
    margin: 100px auto;
    border: 1px solid #000;
}

.son {
    width: 200px;
    height: 100px;
    margin-left: 150px;
    margin-top: 100px;
    background-color: pink;
}

方法二:位移 translate + 定位 position

定位移动的距离参考的父级的大小

位移移动参考的距离是自己自身的大小

利用父相子绝,向右位移50%,向下位移50%,因为定位参考的大小是父级,这时就会超出了

向上反方向位移自身大小的50%这时子盒子就会居中显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  .father {
    position: relative;
    width: 500px;
    height: 300px;
    margin: 100px auto;
    border: 1px solid #000;
}

.son {
    position: absolute;
    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); //移动的是相较于自身的50%,水平向右为正方向，垂直向下为正方向,为正值,同理负值为反方向
    background-color: pink;
}

方法三:flex弹性盒子布局 推荐

利用flex布局就非常的简单轻松

给大盒子设成弹性盒子 ,设置主轴居中justify-content: center和侧轴居中align-items: center就可以实现盒子居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.father {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 500px;
    height: 300px;
    margin: 100px auto;
    border: 1px solid #000;
}

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

方法四: 脱标, 利用浮动 auto 自动居中

给子盒子上下左右设置为0让其脱标,再给外边距设置auto让其自适应实现自动居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.father {
    position: relative;
    width: 500px;
    height: 300px;
    margin: 100px auto;
    border: 1px solid #000;
}

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

方法五:将子盒子转成行内块

将子盒子转成行内块,利用vertical-align: middle属性实现居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.father {
    width: 500px;
    height: 300px;
    margin: 100px auto;
    border: 1px solid #000;
    text-align: center;
    line-height: 300px;
}

.son {
    display: inline-block;
    width: 200px;
    height: 100px;
    background-color: pink;
    vertical-align: middle;
}

方法六:写js

盒子结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  <style>
    .parent {
      width: 500px;
      height: 500px;
      background-color: skyblue;
    }
    .child {
      width: 200px;
      height: 200px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class='parent' id='parent'>
    <div class='child' id='child'></div>
  </div>
</body>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
  <div class='parent' id='parent'>
    <div class='child' id='child'></div>
  </div>
  <script>
    let parent = document.querySelector('parent');
    let child = document.querySelector('child');
    let parentW = parent.offsetWidth;
    let parentH = parent.offsetHeight;
    let childW = child.offsetWidth;
    let childH = child.offsetHeight;
    parent.style.position = "relative"
    child.style.position = "absolute";
    child.style.left = (parentW - childW) / 2 + 'px';
    child.style.top = (parentH - childH) / 2 + 'px';
  </script>
</body>