Div盒子水平垂直居中的方法

1、外边距负值法

div{
   position: absolute;  /*定位：相对于最近的且不是static定位的父元素来定位*/;
   height: 100px;
   width: 100px;     /*宽高固定*/;
   top:50%;
   left:50%;
   margin-top: -50px    /*(负高度的一半)*/;
   margin-left: -50px   /*(负宽度的一半)*/;
}

 

2、transform：translate(-50%,-50%)

div{
  width: 100px;
  height: 100px;
  position:absolute; 
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);  /*transform:translate(x,y) 定义2D 转换*/
}

 

3、margin: auto

div{
  width: 100px;
  height: 100px;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}

如果仅仅是要求水平居中的话，可以只采用margin：0 auto。

 

4、display：flex

div{
  display:flex;
  align-items:center;
  justify-content:center;
}

Flex布局使得容器内的子元素进行排列，align-item：垂直排列方式，justify-content：水平排列方式