居中对齐

<style>

方法一：首先编写两个div，并用边框和背景区分开

  .box {

     width: 200px;

     height: 200px;

     border: 1px solid red;

   }

   .block{

     width: 50px;

     height: 50px;

   }

</style>

<div class="box">

  <div class="block">  </div>

</div>

方法二：接着设置水平居中，在.block中添加margin: 0px auto;

.block{

  width: 50px;

  height: 50px;

 

  margin: 0px auto;

}

方法三：然后我们可以天真一次，尝试修改刚才添加的代码为argin: auto auto;

.block{

  width: 50px;

  height: 50px;

 

  margin: auto auto;

}

方法四：所以这么设置是无效的，那么我们该如何实现垂直居中呢？且看如下代码：

.block{

  width: 50px;

  height: 50px;

 

  margin: 0px auto;

  position: relative;

  top: 50%;

}

方法五：

等等，请先别喷...我想你应该是可以想明白为什么是这样子的。但是这又怎么办呢？且看我再加一行代码：

.block{

   width: 50px;

   height: 50px;

  

   margin: 0px auto;

   position: relative;

   top: 50%;

   -webkit-transform: translateY(-50%);

       -moz-transform: translateY(-50%);

         -ms-transform: translateY(-50%);

            -o-transform: translateY(-50%);

                 transform: translateY(-50%);

}

好了 大功告成。