我们在开发当中经常会遇到需要将一个div（或者说是一个元素）水平垂直居中，小弟知道的可以实现的方法有一下三种。
第一种：利用绝对定位的方法，具体实现可以看这里
<div id = "parent"> <div id = "child"> </div> </div>
#parent{ position:relative; height:500px; background:red; } #child{ position:absolute; width:100px; height:100px; top:50%; left:50%; margin-top:-50px; margin-left:-50px; background:blue }
第二种：利用css3样式flex-box的方法，具体实现方法可以看这里
<div id = "parent"> <div id = "child"> </div> </div>
#parent{ height:500px; display:-webkit-flex; background:red; } #child{ width:100px; height:100px; margin:auto; background:blue }
第三种：就是利用javascript获取div宽高，然后再动态设置div的top，left。
上面三种方法：
第一种方法的缺陷就是必须知道子div的宽高不然无法做到水平垂直居中；
第三种方法利用javascript来设置，最大的缺陷就是不能根据屏幕，窗口改变而立即改变，需要刷新，所以基本不推荐这种方法。
第二种方法是我最推荐的方法，利用flex-box来设置是最完美的，不管你知不知道子div的宽高都无所谓，它都能够实现完美的水平垂直居中。
原文：http://www.cnblogs.com/brianwong/p/4415090.html