CSS元素水平垂直居中，盒子完美居中的方式

一、元素水平居中的方法

1.对于行内元素

父元素上设置：text-align:center

2.对于确定宽度的块级元素

（1）margin实现

margin：0 auto；

  (2)绝对定位和margin-left实现

父元素：position：relative

子元素：margin-left：（父width-子width）/2

（3）对于宽度未知的块级元素

（1）table 标签配合 margin 左右 auto 实现水平居中。使用 table 标签（或 直接将块级元素设值为 display:table），再通过给该标签添加左右 margin 为 auto。 

（2）inline-block 实现水平居中方法。display：inline-block 和 text-align:center 实现水平居中。

（3）绝对定位+transform，translateX 可以移动本身元素的 50%。

（4）flex 布局使用 justify-content:center

二、元素垂直居中的方法

1. 利用 line-height 实现居中，这种方法适合纯文字类

2. 通过设置父容器 相对定位 ；子级设置 绝对定位，标签通过 margin 实现自 适应居中

3. 弹性布局 flex ：父级设置 display: flex; 子级设置 margin 为 auto 实现自适 应居中

4. 父级设置相对定位，子级设置绝对定位，并且通过位移 transform 实现

5. table 布局，父级通过转换成表格形式，然后子级设置 vertical-align 实现。 （需要注意的是：vertical-align: middle 使用的前提条件是内联元素以及 display 值为 table-cell 的元素）。

三、盒子完美居中

   方法一：
        position top：父元素高的一半，left：父元素宽的一半
        margin-top 该元素高的一半，margin-left：该元素宽的一半
    方法二：
        position：absolute；top right left bottom：0
        margin：auto
        子元素上设置
    方法三：
        弹性盒 父元素 display：flex
        justify-content：center
        align-items：center
        flex布局设置居中
    方法四：
        父元素设置position：relative 子元素设置：position：absolute
        left： 50%；top：50%；transform：translate（-50%，-50%）；
        定位：子绝父相
    方法五：
        table-cell实现垂直居中
        父元素：display：table-cell；vertical-align:middle；text-align:center
        子元素：display：inline-block
    方法六：
        给容器加个伪元素
        父元素：text-align:center
        设置父元素伪元素：父元素：：after{content：“”；line-height:
        子元素：display：inline-block