在平时，我们经常会碰到让一个div框针对某个模块上下左右都居中（水平垂直居中），其实针对这种情况，我们有多种方法实现。

方法一:

　　绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）

　　图片展示：

　　代码如下：

方法二:

　　绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值

　　图片展示： 如方法一的图片展示

　　代码如下：

方法三：

　　绝对定位方法：绝对定位下top left right bottom 都设置0

　　图片展示： 如方法一的图片展示

　　代码如下：

方法四:

　　flex布局方法：当前div的父级添加flex css样式

      展示图如下：

　　代码如下：

方法五:

　　table-cell实现水平垂直居中: table-cell middle center组合使用

      展示图如下：

      代码如下：

方法六:

　　绝对定位：calc() 函数动态计算实现水平垂直居中

　　展示图如下：

　　代码如下：