居中方法汇总

1.行内元素居中

text-align：center 
//让文字，行内元素，input，img，在盒子内水平居中 前提：盒子的宽度>内容的宽度 

2.让块级元素在父级元素中水平居中

margin:0 auto 
//前提：这个盒子的宽度<父级元素的宽度 

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.基线对齐

vartical-align:middle
//例如：当行内元素(span)要和行内块级元素(img)对齐是可以对(img)设置 

5.单行垂直居中

line-height 
//必须和height的值相同，用于单行文字，行内元素的垂直居中