水平居中

行內元素

text-align:center;

塊元素

1.定寬塊元素水平居中

margin:0 auto;

2.不定寬塊元素水平居中

方法一：利用浮動的包裹性和百分比相對定位

<div class='outer'><div class='inner'></div> </div>

我們想要使inner(不定寬)水平居中于outer，能夠這么做：
先在inner外面再加一層div:

<div class='outer'><div class='wrap'><div class='inner'></div></div> </div>

起初盒子是這種：

CSS這么寫：

.wrap{float:left;position:absolute;left:50%; } .inner{position:relative; //為啥用absolute沒用啊left:-50%; }

wrap設置為float的原因是形成包裹。把inner包裹住。此時浮動元素wrap的寬和高都是有內部元素inner撐開的。不再是占滿整行。

也就是說wrap的寬和inner的寬相等。

position:relative設置百分比意思是相對于父元素寬度的百分之幾。此時，wrap的左邊緣距離outer的左邊緣是outer.width的一半，也就是說wrap的左邊緣在outer的中線上。

可是我們想要inner的中線和outer的中線重疊，那么就須要inner再往左移動它自身寬度的一半，可是它自身的寬度不知道啊，這就是為什么須要再加一層wrap且wrap要浮動（包裹）的原因。可依據“relative設置百分比意思是相對于父元素寬度的百分之幾”這個規則。

因為wrap的寬度和inner的相等，50%就是inner的寬度的50%。

這種方法也有缺點。因為wrap浮動了。應該清除浮動。

方法二：將要居中的元素放到table的一個td標簽中
原因是table不是塊元素。它不會占滿整行，其寬度是由內容來撐開的。此時能夠設置table的

margin：0 auto;`

就可以。
缺點是添加了無語義標簽。

方法三 改變塊元素屬性為inline或者inline-block
這樣其父元素就能夠使用text-align:center居中內部元素

垂直居中

單行文本

設置父元素的height和line-height相等。

父元素高度確定的多行文本、圖片、塊元素

方法一：
將要垂直居中的元素放到table的td中，然后對td設置：

verticle-align:middle;

事實上默認就是這樣。verticle-align僅僅適用于 inline level, inline-block level 及 table-cells 元素上。

方法二：
在chrome、firefox 及 IE8 以上的瀏覽器下能夠設置塊級元素的 display 為 table-cell，激活 vertical-align 屬性。但注意 IE6、7 并不支持這個樣式。能夠不用table-row這一層，直接外層table。內層table-cell就能實現內層元素中的內容垂直居中。比如以下的toCenter想要在box中垂直居中。須要設置box為table-cell。這樣就能夠激活其vertical-align：

<div class="box"><div class="toCenter">我想要在父元素中垂直居中顯示</div> </div>.box{display: table-cell;width:200px;height:200px;background: pink;vertical-align: middle;} .toCenter{width:100px;height:100px;background: purple;}

缺點：ie6和ie7并不支持display:table-cell。

方法三：要居中的元素高度確定
1.利用定位

<div class="outer"><div class="inner"></div> </div>

CSS代碼為：

.outer{background:#FFCCCC;border:1px solid #000;position:relative; }.inner{width:100px;height:100px;background:#CCFF66;position:absolute;top:50%; //父元素高度的一半margin-top:-50px; //上移自身高度的一半 }

為啥垂直居中不能夠像水平居中方法一一樣啊？

.inner{position:relative; top:-50%; }

沒實用?

??

2.在要居中元素之前加入一個浮動塊，再設置該塊的margin-bottom

<div class="box"><div class="floater"></div><div class="toCenter">我想要在父元素中垂直居中顯示</div> </div>.box{width:500px;height:500px;} .toCenter{width:100px;height:100px;position: relative;clear: both} //清除浮動 .floater{height: 50%;float:left;margin-bottom: -50px}//下邊距為 -要居中元素高度的一半

方法四 父元素的上下padding值設為一樣
當父元素的高度未設置時，將父元素的上下padding值設置為一樣就能夠讓其內部的塊元素垂直方向上看上去居中了。

方法五

.box{position:relative;} .toCenter{position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:240px; width:70%; }

方法六 使用box屬性
父元素設置：

display:box; box-align:center; //將剩余空間均分到子元素上下兩側

參考資料：
未知寬度水平居中的幾種方法
CSS實現垂直居中的5種方法

待看資料: CSS 元素垂直居中的 6種方法

轉載于:https://www.cnblogs.com/wzzkaifa/p/7197144.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的垂直和水平居中方法小结的全部內容，希望文章能夠幫你解決所遇到的問題。

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