CSS设置居中

一.水平居中

1.inline

  使用padding

2.block

（1）单个block

    设置width，使用margin：0 auto；

（2）多个block

    可使用flex

    display：flex;

    justify-content:center;

 （关于flex语法http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）

二.垂直居中

1.inline

（1）单行

    使用padding、

    或者设置line-height

（2）多行

    容器设置display: table;

    文字设置display: table-cell;

    再设置vertical-align: middle;与父元素中间基线对其

2.block

（1）已知元素高度

    设置position: absolute;

    top: 50%;

    再根据高度设置margin-top

（2）未知元素高度

    设置将元素移到父元素中间

    position: absolute;

    top: 50%;

    再往回移动元素长度的一半

    transform: translateY(-50%);

（3）使用flex

   容器设置

   flex-direction: column;
   justify-content: center;

   元素设置

   background: black;

三.水平垂直居中

1）已知元素尺寸

    设置position: absolute;

    top: 50%;

    left:50%;

    再根据尺寸设置margin

（2）未知元素尺寸

    设置将元素移到父元素中间

    position: absolute;

    top: 50%;

    left:50%;

    再往回移动元素长度的一半

    transform:translate(-50%,-50%);

（3）使用flex

    容器设置

    flex-direction: column;
    justify-content: center;

    align-items:center;

    元素设置

    background: black;