div水平垂直居中

div水平垂直居中的方法

一、flex布局方法

给当前的div的父级添加css样式
代码如下：

.父级类名{
  display:flex;
  justify-content:center;
  align-items:center;
}

效果如下：

二、绝对定位的方法

给父级设置relative相对定位，若不设置，子级默认绝对定位于整个网页
给子级设置absolute绝对定位，top left right bottom 都设置为0，margin设置为auto
代码如下：

.父级类名{
  width: 400px;
  height: 400px;
  background-color: aquamarine;
  position: relative;
}
.子级类名{
  width: 200px;
  height: 200px;
  background: #ABCDEF;
  position:absolute;
  left:0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

效果如下：