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>