html居中布局的方法

         如何将一个文本在块元素进行水平居中？
          text-align:center

        如何将一个文本在块元素进行垂直居中？
        1.line-height,
        2.padding,不设高度,
        3.使用display将元素模拟成表格 display:table-cell,vertical-align:middle  vertical-align 属性设置元素的垂直对齐方式。

        如何将一个块元素进行水平居中？
        1.margin:0 auto;
        2.父元素：postion:relative,让子元素绝对定位
        position:absolute;
        top:50%;left:50%;设置元素的左外边距、上外边距为宽高的负1/2

        如何将一个块元素进行垂直居中？
        1.父元素：postion:relative,让子元素绝对定位
        position:absolute;
        top:50%;left:50%;设置元素的左外边距、上外边距为宽高的负1/2 可以完全实现响应式
        2.父元素：使用display将元素模拟成表格 display:table-cell,vertical-align:middle  vertical-align 属性设置元素的垂直对齐方式
        3.加在父元素上display: flex;align-items: center;兼容性最好的响应式布局

                justify-content: center;水平居中

        align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

4.父元素：position：relative，子元素：position：absolute

top：50%，left：50%，transform: translate(-50%,-50%);