CSS 控制元素 上下左右置中

標籤：ati   stat   nbsp   介紹   元素   height   計算   content   9.png   

左右置中: 

　　#method.

　　　　-->. margin:0 auto; 

 View Code

 

：

 

 

上下置中： 

　　在介紹方法之前，我先聲明一下， 這裡的 上下置中法，都是已知 height的，總結分兩種情況，1. 具體height 和 2.百分比height，但無論哪種形式的height，應該都可以歸為 已知height。 下面說一說，百分比height 的兩種需要注意的情景：

　　情景一：position:absoute; top:0; left:0; width:xx%;height:xx%; 　(position:absolute;-->產生絕對位置的元素，相對於 static 定位以外的第一個父元素進行定位。) 　所以，它的百分比height = 相對於 static 定位以外的第一個父元素的height;

　　情景二：position:fixed; top:0;left:0;width:xx%;height:xx%;　　　  (position:fixed;-->產生絕對位置的元素，相對於瀏覽器視窗進行定位。)　　　　　　　　　　　　  所以，它的 百分比height = 相對於瀏覽器視窗高度的height;

　　通過以上的 聲明分析，我總結的 上下置中，總體上分為 四種方法，針對 兩種情境：

　　兩種情境：

　　　　　　　　1. 未脫離文檔流 定位的元素（position：static || relative）

　　　　　　　　2. 脫離文檔流  定位的元素（position: absolute || fixed）

　　ok,該瞭解的都瞭解了，下面進入正題，介紹方法。

 

　　  #Method1.  

　　　　-->. 子容器絕對位置，top:0，bottom:0，margin:auto

　　　　即，父元素 用相對定位, 子項目 用絕對位置(relative --> absolute)，上代碼：

　　　　-->. 優點：設定起來比較簡單，使用範圍較廣；

　　　　-->. 缺點：需要子容器有一個固定的高，或百分比自適應於外部。它的高度不能是height:auto； 相容性 IE8+；

　　　　

 View Code

 

 

：

 

　　#method2.

　　　　-->. 子容器相對定位，top:50%，translateY(-50%)

　　　　即，父元素 用相對定位，子項目 用相對定位(relative --> relative)，上代碼：

　　　　-->. 優點：只設定子項目的屬性即可，無需過多計算；

　　　　-->. 缺點：應用到了CSS3的translateY,所以 相容性 IE9+；

 

 View Code

 

：

 

 

　　#method3.

　　-->. 子項目1：float, 子項目2：clear:both;  floter元素的margin-bottom值 = content的height的值的負一半

　　-->. 優點：position:relative;時，無需聲明 父元素的定位

　　-->. 缺點：需要一個同子項目 同級的 float元素輔助；需要手動計算 float元素的 margin-bottom 的值；

 View Code

 

　　

 ：

 

　　#method4.

　　　　-->. 子項目絕對位置，top:50%; margin-top:-(自身高度的一半)；

　　　　-->. 優點：只操作子項目的css屬性，較為簡單

　　　　-->. 缺點：子項目 和 父元素都需要設定position；需要手動計算 margin-top 的值；

 

 

以上文章參考地點：http://www.cnblogs.com/cnblogs-jcy/p/6074899.html

CSS 控制元素 上下左右置中