如何让块元素居中

其实这个问题，许多人都会遇到，当然我也遇到过，最近想学前端的小伙伴突然来问我，如何让块居中，我想了想，告诉他一种方法，块元素居中是一件很麻烦的事情，不过块元素居中又经常用，据说这个问题已经围绕前端好久了。好在最近在拜读CSS揭秘这一本书，感觉学到了许多，推荐给大家。

1、最普通的方法，用定位和margin负值就可以实现。

   div{

          position:absolute;

          top:50%;

          left:50%;

           margin-top:-3px;

           margin-left:-6px;

           width:12px;

           height:6px;

        }

如题：这个也可以简单的缩减一下：

   div{

          position:absolute;

          top: calc（50%-3px）;

          left:（50%-6px）;

          width:12px;

          height:6px;

      }

当然以上的这个方法我们要知道固定的宽高，其实很麻烦的，如果宽高要是奇数的话，就会很坑。

2、第二个方法可以完美解决固定宽高的问题，我们不需要计算了！不过要注意，一旦出现半像素将会导致元素的一些显示会有模糊，毕竟在CSS中没有十全十美的技巧。

只需要2个东西：一个是绝对定位，另一个是transform位移（CSS3）

     div{

position：absolute;

top：50%；

left：50%;

transform：translate（-50%，-50%）;

}

3、使用flex布局，好吧，是不是很眼熟，没错，flex在图片居中上已经发挥了他的效果，如今它又在此袭来，是不是很有魅力呢？

请注意，最后一个方法，如果使用后，不仅垂直居中，横向也会居中哦！