1.行內(nèi)元素居中

text-align：center 
//讓文字，行內(nèi)元素，input，img，在盒子內(nèi)水平居中 前提：盒子的寬度>內(nèi)容的寬度 

2.讓塊級(jí)元素在父級(jí)元素中水平居中

margin:0 auto 
//前提：這個(gè)盒子的寬度<父級(jí)元素的寬度 

3.定位居中

div{
    width:100px;
    height:100px;
    background:red
    margin:auto;           
    position:absolute    //或是fixed
    top:0;
    left:0;
    bottom:0;
    right:0;
}

div {
     width: 100px;
     height: 100px;
     position: absolute;   //或是fixed
     left:50%;
     top:50%;
     margin-left: -50px;
     margin-top: -50px;
     background: red;
  }

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

//基于視口單位
 div {
      margin: 50vh auto 0;
      transform: translateY(-50%);
      text-align: center;
    }

4.基線對(duì)齊

vartical-align:middle
//例如：當(dāng)行內(nèi)元素(span)要和行內(nèi)塊級(jí)元素(img)對(duì)齊是可以對(duì)(img)設(shè)置 

5.單行垂直居中

line-height 
//必須和height的值相同，用于單行文字，行內(nèi)元素的垂直居中