CSS製做水平垂直居中對齊各類方法總結

時間 2019-11-07

標籤 css 製做水平垂直居中對齊各類方法總結欄目 CSS 简体版

原文原文鏈接

標籤： javascript

方法一：

這種方法用來實現單行垂直居中是至關的簡單的，你只要保證元素內容是單行，而且其高度是固定不變的，你只要將其「line-height」設置成和「height」值同樣就Ok了。不過這種方法侷限性太大，只有單行文本的元素才適用，因此在多行元素中是不能使用這種方法的。前端

Html Markupjava

<div class="vertical">content</div>jquery

CSS Code:ios

.vertical { height: 100px; line-height: 100px; }瀏覽器

優勢：wordpress

適合在全部瀏覽器，沒有足夠空間時，內容不會被切掉函數

缺點：

僅適合應用在文本和圖片上，而且這種方法，當你文本不是單行時，效果極差，差到讓你感到噁心。

這種方法對運用在小元素上是很是有用的，好比說讓一個button、圖片或者單行文本字段。

方法二：

這種方法將在須要給容器設置絕對定位（position:absolute）,而且定位高度（top:50%）和margin-top爲高度的一半（margin-top:-height/2）。這就意味着使用這種方法來實現垂直居中的效果，那麼元素必需要有一個固定的高度。這樣一來，你給元素設置了固定高度，若是你又給他設置了「overflow:auto」，那麼當元素內容超過容器後，這樣元素的就會出現滾動，而不會自適應內容的高度。

HTML Markup

<div class="vertical">content</div>

CSS Code

.vertical { height: 100px; position: absolute; top: 50%; margin-top: -50px; }

優勢：

能在各瀏覽器下工做，結構簡單明瞭，不需增長額外的標籤

缺點：

因爲固定死元素的高度，導致沒有足哆的空間，當內容超過容器的大小時，要麼會消息，要麼會出現滾動條（若是元素在body內，當用戶縮小瀏覽器窗口時，body的滾動條將不會出現）。

這種方法主要是針對多行元素來進行元素的垂直居中，而並不是是此元素的內容垂直居中，這一點先要理解並分開清楚。另外此方法是經過絕對定位來實現的，那麼用這種方法實現元素的垂直居中須要注意如下幾點：其一元素定位關係到一個相對定位參考，因此要保證元素是相對於哪一個爲參考座標；另外須要設置給元素明肯定一個高度值而且給元素設置一個負值的margin-top，並且值爲元素高度的一半。這裏我建議你們給元素定一個寬度值，由於元素進行絕對定位後脫離文檔流，其寬度是根據元素內容所佔寬度來計算的，爲這能讓其視覺效果更好，最好給元素定義一個寬度值。

根據這種方法，咱們稍做修改就能使元素不單是垂直居中，並且還能夠水平居中，如：

HTML Markup

CSS Code

#wrap { width: 200px; height:200px; position: absolute; left: 50%; margin-left: -100px; top:50%; margin-top: -100px; }

這種方法能夠實現元素的水平垂直居中，經常使用於頁面在最中間的佈局，使用這種方法必定要把握住：水平垂直居中的元素要有明確的大小（換句話說就是要有確切的寬和高度值）；給元素進行絕對定位，並設置left,top值爲「50%」（此處最好使用對定位，若是隻是單單水平居中，此處能夠換成相對定位）；最後設置margin-top和margin-left的負值，並且其值分別爲元素高度和寬度的一半。

方法三：

方法三是使用的的div模擬表格效果，也就是說將多個<div>的「display」屬性設置爲禾「table」和「table-cell」，並設置他們的「vertical-align」的屬性值爲「middle」。有關於「display:table」更多的介紹能夠點擊這裏或者去閱讀Quirksmode的《The display declaration》一文。

HTML Code

<div id="container"> <div id="content">content</div> </div>

CSS Code

#container { height: 300px; display: table; } #content { display:table-cell; vertical-align: middle; }

優勢：

這種方法不會像前面的兩種方法同樣，有高度的限制，此方法能夠要據元素內容動態的改變高度，從而也就沒有空間的限制，元素的內容不會由於沒足夠的空間而被切斷或者出現難看的滾動條。

缺點：

不足之處呢？這種方法只適合現代瀏覽器，在IE6-7下沒法正常運行；並且較前二者而言，結構也更復雜。

這種方法在現代瀏覽器下是很是方便。可是在IE6-7中是不被支持的，由於display:table在IE6-7中不被支持，那麼爲了解決這種方法在IE6-7的兼容，須要額外增長一個div，並使用hack，下面咱們一塊兒來看看其解決辦法。

HTML Markup

<div class="table"> <div class="tableCell"> <div class="content">content</div> </div> </div>

CSS Code

.table { height: 300px; width: 300px; display: table; position: relative; float:left; } .tableCell { display: table-cell; vertical-align: middle; text-align: center; padding: 10px; *position: absolute; *top: 50%; *left: 50%; } .content { *position:relative; *top: -50%; *left: -50%; }

方法四：

這種方法有點新意，用這種方法你須要在居中元素前面放一個空的<div>（塊元素就能夠），而後設置這個<div>的高度爲50%，margin-bottom爲元素高度的一半，並且居中元素須要清除浮動。須要注意的是，使用這種方法，若是你的居中元素是放在body中的話，你須要給html,body設置一個「height:100%」的屬性。

HTML Markup

<body> <div id="floater"></div> <div id="content">Content section</div> </body>

CSS Code

html,body {height: 100%;} #floater{ float:left; height:50%; margin-bottom: -120px; } #content { clear:both; height: 240px; position: relative; }

優勢：

這種方法能兼容全部瀏覽器，在沒有足哆空間下，內容不會被切掉

缺點：

元素高度被固定死，沒法達到內容自適應高度，若是居中元素加上overflow屬性，要麼元素出現滾動條，要麼元素被切掉；另外就是一個不算缺點的缺點，那就是加了一個空標籤。

方法五：

這種方法和方法三同樣使用display:table-cell來實現，不過方法五不一樣之處是這個方法咱們須要一個線盒型，用來實現IE下的效果，須要增長一上行內標籤好比說「span」（此處最好使用行內標籤，千萬不要使用塊標籤，由於使用塊標籤會沒有效果），並把這個線盒型高度設置爲100%，其實現原理你們能夠去閱讀張鑫旭-鑫空間-鑫生活的《大小不固定的圖片、多行文字的水平垂直居中》。

HTML Markup

<p class="table"> <span class="tableCell">Centering multiple lines <br>in a block container.</span>  </p>

CSS Code

優勢：

這種方法的優勢和方法三是同樣的，不會有高度的限制。

缺點：

很差的地方就是這種方法爲了讓IE運行正常，須要額外增長一些標籤，另外就是線盒型的標籤種類有限制。不過用起來仍是蠻方便的。

方法六：

這種方法是採用的display:inline-block，而後藉助另外一個元素的高度來實現居中

Html Markup

<div id="parent"> <div id="vertically_center"> <p>I am vertically centered!</p> </div> <div id="extra"></div> </div>

CSS Code

優勢：

能夠自適應高度，簡單易懂

缺點：

須要給元素的父元素設置一個高度，這個高度能夠是一個固定值或者百分值高度，另外須要增長一個額外的標籤，看成線盒型，如div#extra，而且須要設置其高度爲100%。另外就是ie6-7不支持display:inline-block，須要給他們另外寫一個樣式。

這是一個頗有意思的方法，但你要懂得如何使用display。有關於這種方法的操做，你們能夠去看一看Jonathan Potter寫的《CSS, Vertical Centering》。

方法七：

這個方法是針對多行內容居中，並且容器高度是可變的，方法很簡單，就是給出上下同樣的padding值

Html Code

CSS Code

.item {padding-top:30px;padding-bottom:30px;}

優勢：

在全部瀏覽器下能正常工做，支持全部元素，簡單易懂，結構清晰

缺點：

使用這種方法不能給容器固定高度，若是固定高度將沒法達到效果。

方法八：

正如前面所述，若是元素固定高度後要實現垂直居中，用CSS實現很方便，但對於自適應高度的就比較棘手了。那麼第七種方法，要給你們介紹的是使用jQuery的方法

Html Markup

<div class="container"> <p>Centered In The Middle Of The Page With jQuery</p> </div>

CSS Code

.container{ background-color:#338BC7; width:270px; height:150px; }

jQuery Code

$(document).ready(function(){ $(window).resize(function(){ $('.container').css({ position:'absolute', left: ($(window).width() - $('.container').outerWidth())/2, top: ($(window).height() - $('.container').outerHeight())/2 }); }); // 最初運行函數 $(window).resize(); });

優勢：

這種方法，結構簡單，易懂，不須要固定元素的大小。兼容各瀏覽器。

缺點：

須要調用jQuery，若是不支持js或者用戶禁掉了js，那麼將沒法正常運行，那就是杯具了。

上面這種方法對實現頁面居中佈局很方便，下面我根據上面的思路和方法二寫了一個實現元素水平垂直居中的小插件

jQuery Plugin

Html Markup

<div class="wrap"> <p>test jquery</p> </div>

接下來須要調用剛纔寫好的jQuery插件

最後須要在div.wrap調用這個function

這裏有一點須要特別注意，若是元素不是相對於body居中，那麼須要在其父元素中進行相對定位。

上面咱們一塊兒見證了八種不一樣方法實現元素的垂直居中效果，下面咱們在簡單的看一下如何實現元素的水平居中（其實上面有一些效果也實現了水平居中，你能夠慢慢回想一下）。

方法一：

這種方法主要使用margin: auto配合元素的width來實現水平居中的效果

Html Markup

<div class="horizontal">content</div>

CSS Code:

.horizontal { width: 200px; margin: 0 auto; }

使用上面方法實現元素水平居中必定要讓元素知足兩個條件：其一，元素須要有一個固定寬度值；其二元素的margin-left和margin-right都必須設置爲auto，這兩個條件少了任何一個都沒法讓元素達到水平居中的效果。此方法使用水平居中，支持全部瀏覽器運行，所以他也經常使用來實現Web頁面水平居中的佈局效果，若是用在佈局，須要注意IE下的效果，換句話說，若是你的Web頁面沒有明確聲明"!DOCTYPE"，那麼在IE也會以怪異模式解析你的Web頁面，此時上面這種辦法將沒法讓你的頁面實現水平居中，但你可使用下面這種方法解決這個bug。

Html Code:

CSS Code:

body { text-align: center; } .container { text-align: left; width: 960px; margin: 0 auto; }

方法二：

實現固定寬度的水平居中，咱們還可使用絕對定位配合負的margin來實現，具體代碼以下：

Html Markup

<div class="horizontal">content</div>

CSS Code:

.horizontal { width: 960px; position: absolute; left: 50%; margin-left: -480px; }

這種方法有幾點須要注意：其一要有一個固定寬度，其二對要居中的元素進行絕對定位，而且「left: 50%」；其三對此元素設置一個負的「margin-left」而且值等於寬度的一半，另外若是元素不是相對於瀏覽器的話，還須要在其父元素上設置一個相對定位「position: relative」。

方法三：

這種方法主要是針對單行文本居中或者前面介紹的table格式居，主要運用的是text-align:center讓元素水平居中

.testH{text-align:center;}

上面主要是和你們一塊兒探討和學習了多種方法讓元素實現垂直居中，你們能夠在這幾種方法上稍作改變就能實現其水平居中，這樣就達到了元素水平垂直居中的效果。實現方法不少，並且他們也各有千秋，能夠說他們各有各的好，各有各的壞，具體怎麼讓他們更適合你的實際應用，你能夠仔細對比一下，我比較喜歡方法四，簡單，兼容性強，只是須要增長一個額外的標籤。說了這麼多，但願能給須要的朋友有所幫助。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。