MicroTut：將 div 水平和垂直居中

在構建網頁佈局時，您可能遇到過需要使用純 CSS 將 div 水平和垂直居中的情況。有很多方法可以實現這一點，在這個 MicroTut 中，我將向您展示我最喜歡的涉及 CSS 和 jQuery 的方法。

但首先，基礎知識：

使用 CSS 水平居中

就像對 div 應用邊距一樣簡單：

.className{
    margin:0 auto;
    width:200px;
    height:200px;
}

要使 div 僅水平居中，您需要指定寬度和 auto 左右邊距的值 （你記得 CSS 中的速記聲明，不是嗎？）。此方法適用於塊級元素（div、段落、h1 等）。要將其應用於內聯元素（如超鏈接和圖像），您需要應用一個附加規則 - display:block .

使用 CSS 實現水平和垂直居中

使用 CSS 將 div 水平和垂直居中有點棘手。您需要事先知道 div 的尺寸。

.className{
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
}

通過絕對定位元素 ，我們可以將其與周圍環境分離，並指定其相對於瀏覽器窗口的位置。將 div 偏移 50% 從窗口的左側和頂部，您的左上角正好位於頁面的中心。我們唯一要做的就是將 div 移到 left 並到頂部 一半 它的寬度和高度帶有負邊距，使其完全居中。

使用 jQuery 進行水平和垂直居中

如前所述 - CSS 方法僅適用於具有固定尺寸的 div。這就是 jQuery 發揮作用的地方：

$(window).resize(function(){

    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });

});

// To initially run the function:
$(window).resize();

該功能被插入到 $(window).resize() 語句，每次用戶調整窗口大小時都會執行該語句。我們使用 outerWidth() 和 outerHeight() ，因為不同於常規的 width() 和 height() ，他們將填充和邊框寬度添加到返回的大小。最後，我們模擬了一個 resize 事件，讓 div 在頁面加載時居中。

使用這種方法的好處是你不需要知道 div 有多大。主要缺點是它只能在打開 JavaScript 的情況下工作。然而，這使得它非常適合豐富的用戶界面（例如 facebook 的）。

請務必在評論部分分享您最喜歡的方法。