关于CSS实现水平垂直居中

行内元素：

1.text-align:center 

   对文本，图片，按钮等行内元素进行水平居中

2.line-height:行高

  当只有一行文字元素时，将line-height设为行高可实现垂直居中

 

块元素：

3.margin:0 auto

  对于有宽度的块元素，设置margin:0 auto,相对于父元素水平居中

 

4.绝对定位与负边距实现

  利用绝对定位，将元素的top和left属性都设为50%，再利用margin边距，将元素回拉它本身高宽的一半，实现垂直居中。

  eg:

 

 <divid="content">
      <div id=""center-box></div>
 </div>

 #content{
        position:relative;
    }
 #center-box{
       width:200px;
       height:200px;
       position:absolute;
       top:50%;
       left:50%;
       margin:-100px  0  0  -100px;
  }

  注：margin的值根据居中块元素自身宽高决定，为其一半。此例可实现水平垂直居中

 

5.transform

   css3中提出transform，利用transform（-50%，-50%）可在未知居中块元素高宽的情况下偏移自身的一半宽高，替代4中的margin属性

eg:

  <div id="content">
       <div id=""center-box></div>
 </div>

 #content{
         position:relative;
    }
  #center-box{
        width:200px;
        height:200px;
        position:absolute;
        top:50%;

  #content{
      position:relative;
  }
  #center-box{
      width:200px;
      height:200px;
      position:absolute;
      top:50%;
      left:50%;
      transform: translate(-50%, -50%);
  }

6.flex

  利用弹性布局实现居中

  将display设为弹性布局：display:flex

  垂直居中：align-items:center

  水平居中 :  justify-content:center