css(div水平垂直居中)

<style>

html,body{

            margin: 0; padding: 0;
        }
        .box {
            position: relative;         /*这个可以去掉 看看效果哦，注意会有变化啊*/
            width: 600px;               /*宽*/
            height: 400px;              /*高*/
            background-color: rgba(212,66,33,.86);
            margin: 0 auto;
        }
        .Absolute-Center {
            width: 50%;
            height: 50%;
            background-color: green;
            position: absolute; top: 0; bottom: 0; left: 0; right: 0;   /*css溢出法*/
            margin: auto;
        }

  </style>

<!-- 方法一 ：
  绝对定位下top left right bottom 都设置0，再margin: auto
  IE8+以及其他浏览器都是OK的
-->
  <div class="box">
          <div class="Absolute-Center" >
              我是要居中的元素
          </div>
  </div>
  <hr />
  <!-- 方法二
 相对定位  top:50%  再上移本身的50%
-->
  <div class="box">
        <div class="Absolute-Center" style="position: relative; top: 50%;-webkit-transform: translateY(-50%);margin:auto;" >
            我是要居中的元素
        </div>
    </div>
    <hr />
    <!-- 方法三
         设置margin-top是height值的一半的负值
  -->
    <div class="box">
          <div class="Absolute-Center" style="width: 160px;height: 80px;top: 50%;margin-top:-40px; margin-left: auto; margin-right: auto;" >
              我是要居中的元素
          </div>
    </div>