实现块级元素垂直水平居中的2种简单实现方式

flex布局

属性：更多的属性以及一些用法可以去flex菜鸟教程看具体用法

• flex-direction  决定主轴的方向（即项目的排列方向）。
• flex-wrap  默认情况下，项目都排在一条线（又称”轴线”）上。
• flex-flow  是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
• justify-content 定义了项目在主轴上的对齐方式。
• align-items  定义项目在交叉轴上如何对齐。
• align-content  定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

用法：

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

position 子相父绝

属性：用于设置元素位置的确定方式，它有以下几种取值

static：默认定位方式，子元素在父容器中挨个摆放
absolute：绝对定位，元素不占据父容器空间，相当于文档body定位（如果元素的父级节点中有position不等于static的，则相当于最近的非static父节点定位）
relative：相对定位，占据父容器空间，但显示位置相当于自身位置进行偏移
fixed：固定定位，元素相当于窗口进行定位（相当于窗口而不是文档定位，所以即使发生进度条滚动时，元素相当于窗口的位置仍然不变）

sticky：粘性定位，这是一个带过渡效果的定位方式，只有在滚动时才能看出其变化效果
当偏移量大于指定值时，以static方式显示
当偏移量小于指定值时，以fixed方式显示，但却像relative方式一样占据父容器空间
当元素到达父容器边缘时，位置相当于父容器不再变化

用法 ：

body{
  position: relative;
}
.div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}

 position定位还可以结合其他css属性去实现块级元素垂直水平居中，有兴趣的小伙伴可以多了解一些，提升自身的能力。