1. 程式人生 > >盤點8種CSS實現垂直居中水平居中的絕對定位居中技術

盤點8種CSS實現垂直居中水平居中的絕對定位居中技術

其他 margin phone ie10 logs html mar over 防止

1.絕對定位居中(Absolute Centering)技術

  我們經常用margin:0 auto;來實現水平居中,而一直認為margin:auto;不能實現垂直居中......實際上,實現垂直居中僅需要聲明元素高度和下面的CSS:

.Absolute-Center {
   margin : auto ;
   position : absolute ;        
   left :  0 ; right : 0 ;  top :  0; bottom: 0;
}

 優點:

  1.支持跨瀏覽器,包括IE8-IE10;

  2.無需其他特殊標記,CSS代碼量少;

  3.支持百分比%屬性值和min-/max屬性;

  4.只用這一個類可實現任何內容塊居中;

  5.不論是否設置padding都可居中(在不使用box-sizing屬性的前提下);

  6.內容塊可以被重繪;

  7.完美支持圖片居中。

缺點:

  1.必須聲明高度(查看可變高度 Variable Height);

  2.簡易設置overflow:auto;來防止內容月結溢出。(查看溢出Overflow)

  3.在Windows Phone設備上不起作用

瀏覽器兼容性:

  Chrome,Firefox,Safari,Mobile Safari,IE8-IE10,

  絕對定位方法在最新版Chrome,Firefox,Safari,Mobile Safari,IE8-IE10上均測試通過。

盤點8種CSS實現垂直居中水平居中的絕對定位居中技術