大家好，我是IT修真院成都分院第07期學(xué)員，一枚正直善良的web程序員。

一.背景介紹

居中在Html、CSS布局中經(jīng)常會被使用，

元素的水平居中比較簡單，

行級元素設(shè)置其父元素 text-align：center，

塊級元素設(shè)置其本身left、right的margin值為auto即可，

垂直居中則較為麻煩，

以下是我所知道的垂直居中的一些方法。

二.行內(nèi)元素的垂直居中

1.使用line-height=height

2.使用 + 一個行內(nèi)元素（如下圖）

三.已知高度元素的垂直居中

1.使用絕對定位position：absolute top/bottom：50% + margin:-50%自身高度

2.前面設(shè)置一個父元素高度50%的DIV + position：elative：top：-自身高度的一半

四.未知高度元素的垂直居中

1.使用display：table-cell + vertical-align:middle

2.使用絕對定位，top：0 bottom：0 left：0 right：0 + margin:0 auto(如下圖)

3.CSS3新屬性 transform：ranslat:(-50%,-50%)+絕對定位

五.擴(kuò)展思考

使用絕對定位，top：0 bottom：0 left：0 right：0 + margin:0 auto 實(shí)現(xiàn)居中的原理是什么？

可能是將未知的寬度高度的元素，使其讓它的top,bottom,left,right,都與父級的距離為零，如果其元素寬高不夠的，就會用margin:auto去填充其大小，從而實(shí)現(xiàn)了居中。

還有沒有更為簡便或適用性更廣的垂直居中方法？

使用flex彈性布局：display: flex align-items: center

六.參考資料

http://blog.csdn.net/wolinxuebin/article/details/7615098

http://www.cnblogs.com/yugege/p/5246652.html

http://www.360doc.com/content/11/1011/10/1609343_155094382.shtml