CSS居中的几种方法

一、水平居中

1.行内元素居中（文字/图片）
在父元素上加上text-align:center;

2.块级元素居中
设置宽度，设置margin:0 auto;

二、垂直居中

1.行内元素（块级容器高度由内容撑开）
上下padding相等

2.块级元素（水平垂直居中）

{
   position:absolute;
   left:50%;
   top:50;
   transform: translate(-50%,-50%);
}

3.vertical-align （图片在容器垂直居中）
vertical-align: middle可以使得行内元素/表格在父容器内中线对齐（可用于将同一行的不同大小的字体垂直居中）

垂直居中的办法：
.box :before { content : ''; display : inline-block; height : 100%; vertical-align: middle; } .box : img { vertical-align: middle; }

4. 使用table-cell

      display : table-cell;
       vertical-align: middle;

5. 使用 display : flex

    display : flex;
    align-items : center;     /*  垂直居中 */
    justify-content : center;     /*  水平居中 */