css實現元素水平垂直居中

1.絕對定位，利用負邊距

利用負邊距實現子元素居中(相對於父元素(position:relative))，需已知子元素的width與height；且把子元素的position設爲absolute，絕對定位；以及設置left和top爲50%；再加上負邊距，margin-left值爲width的一半，一樣的，margin-top值爲height的一半。

咱們來理解一下，絕對定位的子元素，經過自身的邊界來相對於父元素進行定位，這個邊界就是margin，當咱們設置了left和top各爲50%時，子元素左邊界距父元素左邊界50%,上邊界距父元素上邊界50%，其實此時，咱們能夠知道，子元素的左上角這個點，是水平垂直居中的，當咱們設了負邊距時，咱們能夠理解爲這個子元素向右向上各移了自身長度的一半，這就達到了水平垂直居中。固然咱們也能夠這麼理解，其實真正相對於父元素來定位的點就是子元素左上角的點，當咱們設了負邊距，子元素的中心點就取代了它左上角的點，若但願子元素能水平垂直居中，這時只需再設left和top各爲50%時即可。
代碼以下：

2.絕對定位，margin:auto

使用絕對定位方式, 以及left:0;right:0;top:0;bottom:0;margin:auto

當咱們爲子元素設置left:0;right:0;top:0;bottom:0;時，瀏覽器將給子元素從新分配一個邊界框，此時子元素將填充其父元素的全部可用空間，當咱們給子元素設置一個width或height，防止子元素佔據全部的可用空間，瀏覽器將根據新的邊界框從新計算，再加上margin:auto,因爲被絕對定位，脫離了正常的文檔流，瀏覽器會給margin-left,margin-right相同的值，margin-top,margin-bottom相同的值，使元素塊在父元素中水平垂直居中。
代碼以下:

3.Flex

Flex佈局即爲彈性佈局，只需將父元素設置三個屬性便可(display,justify-content,align-items)
代碼以下：

4.Transform

CSS3中新增的transform屬性, 代碼以下：

5.Table

模擬表格效果:

總結

1.利用負邊距方法優勢是具備良好的跨瀏覽器特性，兼容IE6/IE7，可是缺點是不能自適應，需設置子元素的寬高，不支持百分比，且負邊距值與padding和是否認義box-sizing: border-box有關，計算須要根據不一樣狀況。

2.利用margin:auto方法支持跨瀏覽器，支持百分比，可是必須聲明子元素的width或height(至少一項，否則會佔據父元素全部空間)。

這兩種絕對定位方法，可在子元素中，設置overflow:auto來防止內容越界溢出。

3.利用flex或transform方法的好處是代碼量少，且你不用設置子元素的width與height,內容可由子元素裏的子元素任意撐開，優雅地溢出。但flex IE8/IE9不支持，transform IE8不支持，且屬性須要寫瀏覽器廠商前綴。

4.table方法的好處是沒有空間的限制，能夠根據元素內容動態的改變高度，素的內容不會由於沒足夠的空間而被切斷或者出現難看的滾動條。但在IE6-7下沒法正常運行，結構也更復雜。

5.html結構以下:

6.實驗結果以下：(實現了子元素的水平垂直居中，同時可觀察到兩張圖溢出的方式不一樣)
絕對定位的溢出(overflow:auto)：

flex或transform或table的溢出：