CSS（3）中的居中问题

一、行级元素的水平和垂直居中

水平居中：text-align:center

注：不可直接给<img>标签直接利用该属性，要给<img>标签外加<div>或<span>,给其父级元素使用该属性。

垂直居中：line-height：行高或容器高度

二、块级元素水平与垂直居中

水平居中：

      1、   margin:0 auto;           （定宽）

      2、   position：absolute;     （定宽）

              left:50%;

              right:50%;

              margin-left= -width/2；

     3、   flex布局

              display：flex；

              justify-content：center；

垂直居中：

       1、 positon：absolute;     （定宽）

              top:50%;

              bottom:50%;

              margin-top= -height/2；

        2、   flex布局

              display：flex；

              flex-direction: column;

              justify-content：center；

水平垂直居中：

        1、positon：absolute;  （不定宽）

              top:50%;

              left:50%;

              transform：translate（-50%，-50%）；

注：translate会依据自身元素的高度和宽度向右、向下平移；负值则为向左、向上平移。

         2、flex布局

              display：flex；

              justify-content：center；

              align-items：center;