一、水平居中

普通流（文档流）

inline

可以设置text-align：center使标签内的文本内容居中，但对行内元素没用（如<span>），行内元素如果要实现居中，可在他的父元素上设置text-align：center。

block

块元素具有宽高，可调整块元素的margin实现居中效果——上下边距为0，左右边距自适应即可。

div{
       height: 200px;
       width: 200px;   
       margin: 0 auto; 
      }                 //需要居中块元素就必须要有宽度（不设置宽度，有文字也行）

浮动元素（文本流）

相对定位

浮动元素脱离文档流后，margin: 0 auto就没办法使用了，但是可以采用position，设置成相对定位后，设置左侧相对原来偏移50%，然后回去宽度的一半。

      div {
        height: 200px;
        width: 200px;
        float: left;
        position: relative;
        left: 50%;
        margin-left: -100px;
        /* transform:translateX(-50%);   也可采用CSS3的办法，移动X轴的位置 ，就不用知道元素宽度了*/
      }

绝对定位

行内元素设置position: absolute之后，也可以像块元素一样操作了,也可以同上设置：left: 50%;margin-left: -100px;。

      span {
        width: 200px;
        float: left;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
      }

二、垂直居中

1、使用padding，设置上下填充。

div {
     padding: 10px 0;   /* 上下填充10px，左右为0 */
     text-align: center;
}

2、设置行高line-height

div {
    height: 200px;
    line-height: 200px;
    text-align: center;
}
/* 如果有多行文本则需要添加以下样式： */
div p {
    line-height: 1.5;       /* 相当于行距 */
    display: inline-block;
    vertical-align: middle;
}

3、使用position和transform

      div {
        position: relative;
      }
      div p {
        margin: 0;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

4、使用flex-box

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}