div垂直水平居中的方法

方法一：div绝对定位水平垂直居中(margin:auto实现绝对定位元素的居中)

      div{
     width: 200px;
             height: 200px;
             background: green;
             position:absolute;
             left:0;
             top: 0;
             bottom: 0;
             right: 0;
             margin: auto;

}

兼容性：IE7及之前版本不支持

方法二：div绝对定位水平垂直居中(margin 负间距)

      div{
     width: 200px;
           height: 200px;
           background: green;
           position:absolute;
           left:50%;
           margin-top:-100px;
           margin-left:-100px;

      }

方法三：div绝对定位水平垂直居中【Transforms 变形】

兼容性：IE8不支持

        div{
      width: 200px;
              height: 200px;
              background: green;
              position:absolute;
              left:50%; /* 定位父级的50% */
              top: 50%;
              transform: translate(-50%,-50%);  /*自己的50% */

}

方法四：

      #day{
width:800px;
                height:500px;
                border:1px solid #000;
                display:flex;
                justify-content:center;
               align-items:center;
}
     .child{
       width:200px;
               height:200px;
               background-color: red;

}

方法五：

      #first{
width:800px;
                height:500px;
                border:1px solid #000;
                display:table-cell;
                vertical-align:middle;
                text-align: center;
}
.second{
             width:200px;
                     height:200px;
                     display:inline-block;
                     background-color: red;
 }