想让元素垂直居中哪种方案好？

前端经常碰到的问题之一就是对齐方式。而在所有对齐方式中，垂直居中最难搞。如果你给div或其他块级元素设了浮动，那么再用vertical-align:middle就不灵了。这时候有两个办法解决。

方法1，给元素设置line-height。举个例子，如果元素所在的div或其他块级元素的高度是50px, 那么就在样式表中给想要设置垂直居中的元素设置：line-height:50px; 这样该元素就位于所在div或其他块级元素的垂直居中位置了。

方法2，用表格来设置垂直居中, 具体方法为, 在div中插入表格，并给表格单元格设置：valign="middle"。还拿刚才那个div举例，要设置垂直居中可以在html代码中加入表格：

         

         

       

       

       

       

       

元素

 

完成之后元素就位于垂直居中的位置上了。

比较这两种方法会发现，第一种方法优点是简单，缺点是对不同高度的div或其他块级元素都要有同样的line-height设置，如果元素所在div或其他块级元素的高度发生变化，你就必须重新设置line-height, 有手动成分，不利于复制和更新。而第2种方法缺点是有点复杂，优点是不需要手动设置line-height值，表格自动为元素设置了垂直居中。这意味着，在div高度发生变化的情形出现时，再也不必担心元素位置会跑偏了。对于需要考虑更新和复制元素所在div或其他块级元素时，非常方便。也就是有利于代码的扩展。

结论: 如果只需要考虑应用在一个div或位置上的垂直居中，用方法1比较好；但是如果需要考虑更新和复制等因素，方法2更优。在很多情形下，看似“笨拙”的方法2还是有其应用价值的。