# div 水平垂直居中

html 代码如下

<body>
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
</body>
1
2
3
4
5

# 已知盒子宽高

  • 1、将 left right 属性都设为 50%。
  • 2、计算元素位置用负 margin 的形式使 div 居中。
.div3 {
  width: 520px;
  height: 520px;
  background: rgb(69, 52, 221);
  left: 50%;
  top: 50%;
  margin-top: -260px;
  margin-left: -260px;
  position: absolute;
}
1
2
3
4
5
6
7
8
9
10

# 未知盒子宽高

方法一:

  • 1、采用绝对定位
  • 2、把 left bottom right top 全设为 0。
  • 3、margin 设为 auto
  /*方法一: margin:auto; position: absolute;  */
  .div1 {
    width: 520px;
    height: 520px;
    background: rgb(62, 184, 206);
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    margin: auto;
    position: absolute;
  }
1
2
3
4
5
6
7
8
9
10
11
12

方法二:

  • 1、将 left right 属性都设为 50%。
  • 2、用 transform: translate(-50%, -50%) 把盒子移动自身的 50% 达到居中的效果。
.div2 {
  width: 520px;
  height: 520px;
  background: rgb(226, 108, 220);
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
1
2
3
4
5
6
7
8
9