css垂直居中方案

先介紹幾種常見的垂直佈局方式：

已知盒子具體寬度（寬度能夠爲百分比）（適用於居中浮動元素）

第一種：

給父元素相對定位,給子元素絕對定位

父佈局 {
   position: relative; 
}

子佈局 {
    position: absolute;
    left: 50%;
    top: 50%; 
    margin-left: -(寬度度/2);
    margin-top: -(高度/2);
}

例子：

當不知到盒子的具體大小時，可藉助jquery實現css樣式：

jQuery實現水平和垂直居中的原理就是經過jQuery設置DIV的CSS，獲取DIV的左、上的邊距偏移量，邊距偏移量的算法就是用頁面窗口的寬度減去該DIV得寬度，獲得的值再除以2即左偏移量，右偏移量算法相同。注意DIV的CSS設置要在resize()方法中完成，就是每次改變窗口大小時，都要執行設置DIV的CSS，代碼以下：

$(window).resize(function(){ 
    $("#children").css({ 
        position: "absolute", 
        left: ($(window).width() - $("#children").outerWidth())/2, 
        top: ($(window).height() - $("#children").outerHeight())/2 
    });        
}); 

此外在頁面載入時，就須要調用resize()。

$(function(){ 
    $(window).resize(); 
}); 

 

第二種：

給父盒子相對定位, 給子盒子設定絕對定位； top、right、bottom、left全爲0，此時當設置絕對定位四個方向都爲0時，瀏覽器不知道你所處的位置，這時設置margin:auto,應驗起到做用，但這個方法不到萬不得已時，不要使用

彈性佈局（flex佈局）

注：不過這高大上的它，兼容性很差，不支持IE9及IE9如下，具體方法是：

爲父級元素開啓fllex佈局 display:flex;

justify-content: center; //定義多根軸線的對齊方式（定義水平方向的位置）

align-items: center;//定義項目在交叉軸（垂直方向）的對齊方式

（不過這高大上的它，兼容性很差，不支持IE9及IE9如下）

 

平移（位移）

注：不兼容IE8及IE8如下，方法：

爲父親開啓相對定位position;relative;

爲孩子開啓絕對定位position:absolute;top:50%;left:50%;最後利用CSS3中的transform:translate( -50%,-50%); 就能夠將盒子居中了

table方法

關於更多 display:table-cell的應用，推薦移步 我所知道的幾種display:table-cell的應用

 

 延伸閱讀：css自帶的居中屬性

 

text-align: center

只能對圖片，按鈕，文字等行內元素(display爲inline或inline-block等)進行水平居中。但要說明的是在IE六、7這兩個奇葩的瀏覽器中，它是能對任何元素進行水平居中的。

line-height: 50px

文字上下居中（前提是已知盒子高度，50爲盒子高度），適用於只有一行文字的狀況

div左右居中

div1{width: 200px;margin: auto}

這樣div1就會在父級中左右居中；

上下居中可用padding屬性上下撐開。