垂直和水平居中方法小結

text-align:center;

1.定寬塊元素水平居中

margin
:0 auto;

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

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

class=『outer『>
class=『inner『>
div>
div>

我們想要使inner(不定寬)水平居中於outer，可以這麼做：

先在inner外面再加一層div:

class=『outer『>
class=『wrap『>
class=『inner『>
div>
div>
div>

起初盒子是這樣的：

css這麼寫：

.wrap

.inner

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

這樣其父元素就可以使用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：

class="box">

class="tocenter">

我想要在父元素中垂直居中顯示

div>

.box

.tocenter

缺點：ie6和ie7並不支援display:table-cell。

方法三：要居中的元素高度確定

1.利用定位

class="outer">

class="inner">div>

div>

css**為：

.outer .inner

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

.inner

沒有用???

2.在要居中元素之前新增乙個浮動塊，再設定該塊的margin-bottom

div> 我想要在父元素中垂直居中顯示 div> div> .box .tocenter//清除浮動

.floater//下邊距為 -要居中元素高度的一半

方法四父元素的上下padding值設為一樣

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

方法五

.box .tocenter

方法六使用box屬性

父元素設定：

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

垂直和水平居中方法小結

CSS垂直居中水平居中方法

css垂直水平居中方法

垂直水平居中方法總結

垂直和水平居中方法小結

CSS垂直居中水平居中方法

css垂直水平居中方法

垂直水平居中方法總結

相關推薦