最近有點空閑時間，所以想好好看看幾個一直沒機會看的問題。把它寫下來，是促進自己更好地理解，同時也是一個備忘吧！

先說元素居中，元素居中，從最開始接觸前端就一直揮之不去的一個問題，也許是太忙了，這個本該認真研究的問題，竟然一直都沒有好好總結，總是遇到了臨時應付。一個個小問題的深度剖析和積累，達到量的積累才能獲得質的改變。（當然，同時，所有很大很大的東西其實都是由一點一點的小東西組成的，比如一個大的網站是由很多有組織的居中，或者浮動等層層嵌套和疊加等而實現的。）所以，這是一個好的開頭，元素居中，我的第一個深度剖析和總結的問題！

很多時候，我們實現居中可能只用某一種方式，習慣了就會基本上一直使用。討論的意義在于融會貫通，也許實際項目中并不一定會用到其中的很多種居中方式，但是，這是一件一加一遠大于二的事，別人給你說一千遍，也不如你自己親自實踐一遍，實踐總是會給你意想不到的“小獎勵”，你在實踐的過程中很多屬性你會從陌生到了然于胸，而且很多并不能夠言傳。

先來劃分維度，這里講從水平居中和垂直居中兩個緯度來討論。

一，水平居中

顧名思義就是水平方向上的居中，情境有很多。比如，按鈕上的文字，標題，圖片相對父容器等等。

1.自動外邊距：塊級、定寬的元素水平居中

從很多文章中了解到，這應該是大家使用最普遍的一種水平居中方式。對于一個有固定寬度的塊級元素，只要設置margin: 0px auto;即可實現水平的居中效果。如果有父容器則相對于父容器居中，否則相對于body居中。不定寬的話，這個塊級元素將會占據整整一行。

原理理解：左右auto也就是左右一樣多，這樣就很容易理解為什么能夠水平居中了。

<div style="height: 200px;width: 200px;background-color: antiquewhite;margin: 0px auto;">定寬塊狀元素，左右margin auto</div>

2.文本的text-align: center：行內元素水平居中

這個居中方式只針對文本和行內元素有效（塊級元素可通過設置display：inline使其適用。）。給父元素設text-align：center，則其子元素就能夠水平居中。這本是針對文字的一個樣式，這樣的使用方式很方便，但是嚴格意義上來說有點不正規吧，但是，真的很好用哦，兼容性也超好。

原理理解：類似于word中文字的居中，這里你把所有行內元素想象成文字就好了。

<div class="text-center"><span>文本，同時也是行內元素的居中</span><img src="img/img.jpg" /></div>

3.加table標簽，為table設自動外邊距：不定寬塊級元素水平居中。

此時，塊級元素寬度會隨著內容變化，但是布局始終是居中顯示的。

原理：使用了表格單元格的特殊屬性。

<table style="margin: 0 auto;"><tbody><tr><td><div style="background-color: aquamarine;">不定寬塊狀元素，加table標簽，給table設margin auto。實現居中</div></td></tr></tbody> </table>

4.絕對定位結合百分比：不定寬塊級元素水平居中。

原理理解：容器相對于body有一半的left，然后內容相對屏幕的中間那條線向左移動自身一半的距離，剛好實現了居中。

<div style="position: absolute;left: 50%;"><div style="position: relative;left: -50%;background-color: purple;">同時設置容器和元素position然后再分別設置left值</div> </div>

二，垂直居中

垂直居中同樣也要分情況討論，父元素高度確定的單行文本，父元素確定的多行文本，圖片和塊狀元素等。

1.line-height=height:父元素高度確定的單行文本

原理理解：文字在一行內部是居中顯示的，讓行高等于元素高，這樣文字在行內居中自然也就在元素內部居中了。

<div style="height: 60px;line-height: 60px;background-color: lawngreen;">父元素高度確定的單行文本。上下居中。</div>

2.display:table-cell;vertical-align: middle：父元素高度確定的多行文本。

原理理解：這是通過table-cell激活了vertical-align：middle，也就是垂直居中；

<div style="height: 200px;display:table-cell;vertical-align: middle;background-color: skyblue;">多行文本。。。。 </div>

3.絕對定位居中技術：

原理理解：它通過激活margin:auto;來實現居中，W3C默認的是元素margin：auto，時上下邊距為零的，但是，通過絕對定位和相對定位，然后設置left，bottom，right，top值為零，模擬一個從文檔流中分離的邊界，這是設置margin：auto，就可以讓上下左右margin都相同了。

.center-container{position: relative;height: 100px;}
.absolute-center{width: 50%;overflow: auto;margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;}

* 容器是需要有高度的，并且定位屬性為relative。

* 內容要有寬度或者高度，以防它占據整個容器。

*?overflow: auto;防止溢出時錯誤顯示。設為auto溢出時會出現滾動條。保持在容器內部。

原理詳解：A：普通內容流中，margin：auto;的效果等同于讓上下邊距為零，這是W3C官方文檔中定義的。

　　　　　B：position：absolute；是絕對定位塊跳出了內容流，內容流中其余部分渲染時絕對定位部分不進行渲染。

　　　　　C:為區塊設置?top: 0;?bottom: 0;?left: 0;right:0;將給瀏覽器重新分配一個邊界框，此時該元素將填充其父元素所有可用空間；一般父元素為body或者聲明position：relative；的元素。

　　　　　D：給內容塊設置一個高度或者寬度，能夠防止讓內容塊占據所有可用空間。

　　　　　E：由于，內容塊脫離文檔流，設置了margin：auto后瀏覽器會給margin top和bottom設置相同的值，從而實現上下居中。

（1）、容器內的絕對居中

這是直接利用了margin的均分來實現的。

<div class="center-container" style="background-color: aquamarine;">我是容器<div class="absolute-center" style="background-color: bisque;height: 50%;">我是內容，我現在是在容器內部居中顯示的。</div> </div>

（2）、視區內的絕對居中

結合position:fixed;z-index來實現。

<div class="center-container" style="background-color: aquamarine;">我是容器<div class="absolute-center" style="position:fixed;z-index:999;background-color: coral;width: 30%;height: 200px;">我是在視區內絕對居中的。<br />絕對居中</div></div>

（3）、側邊欄

給left或者right設置具體值，然后另一個auto就好了。

<div class="center-container" style="background-color: aquamarine;">我是容器<div class="absolute-center" style="left: auto;right: 10px;background-color: lawngreen;width: 300px;">我是在視區內偏右側上下絕對居中的。</div></div>

（4）、響應式居中

結合百分比。

<div class="center-container" style="background-color: aquamarine;">我是容器<div class="absolute-center" style="width:60%;height:60%;min-width:200px;max-width：400px;background-color: mediumaquamarine;">響應式居中。</div> </div>

（5）、圖片居中

這個要控制圖片高度auto，放置圖片顯示錯誤。

<div class="center-container" style="background-color: orchid;height: 200px;"><img style="width:200px;height: auto;display: table;" class="absolute-center" src="img/img.jpg" /> </div>

還有很多適用情況，重要的是理解原理，然后靈活應用。

4.floater DIV：

原理理解：這是通過一個浮動的div，寬度為百分之百，高度為容器的一半，然后通過負的下邊距，來把需要居中的元素拉到格式的位置來實現的，這種方式不是很靈活，雖然能夠實現居中。

<div style="background-color: hotpink;height: 200px;"><div style="float: left;height: 50%;width: 100%;margin-bottom: -50px;"></div><div style="background-color: aquamarine;clear: both;height: 100px;">我是內容</div> </div>

5.相同的padding top和bottom實現居中：

原理理解：這個就很好理解了，上下padding相同，自然就居中了。不過靈活性也不大。

<div style="background-color: darkorange;padding: 20px 0;"><div style="background-color: burlywood;">相同的上下padding</div> </div>

?

總結

以上是生活随笔為你收集整理的元素的居中方式总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。