css垂直置中

標籤：技術   isp   定義   position   截斷   高度   fixed   css垂直置中   absolute   

　　前兩天在寫左圖右字，右圖左字的時候，遇到了垂直置中的問題。才感覺垂直置中沒有想象中的so easy。下面我分情況介紹一下:

方法一

　　可以設定父級顯示方式為表格（display：table；），後代就可以使用表格屬性(vertical-align:middle;)。

　　優點：content可以動態改變高度，不需要css定義高度，當wrapper沒有足夠高度時，content不會被截斷。

　　缺點：IE相容不好；嵌套多個標籤。

                 

方法二

　  當內容容器有固定高度時，使用絕對位置，（position：absolute；top:50%；margin-top：高度/2；）

　　優點：少套用標籤，沒有相容問題。

  　　　　

方法三

　　當內容容器有固定高度時，使用固定定位，（position：fixed；top:0；margin:auto;），相對於瀏覽器垂直置中。

　　優點：少套用標籤，沒有相容問題。 

方法四

　　相對父盒子絕對位置。

                

方法五

　　設定line-height=height；使單行文字垂直置中。

以上方法都是需要固定高度，以下的方法不需要固定高度

方法六

　　使用css3新屬性transform：translate(-50%,-50%);

　　　　

　　　　

方法七

　　最好使用彈性盒布局，可以設定垂直置中。

　　　　

　　　　

 

css垂直置中