用CSS實現層的垂直居中

2021-07-04 14:06:38 字數 806 閱讀 1119

在《曾經讓人迷糊的web相容問題回顧》一文中曾經提到一種方法，即「通過使用百分比絕對定位,與外補丁負值的方法，負值的大小為其自身寬度高度的一半」達到讓層垂直居中的效果。

複製**

div


.innerbox
這段css實現了層垂直居中於瀏覽器，如果要讓innerbox相對於乙個父級層實現垂直居中，只需設定父級層的css為：

div


.outbox
然而「負值的大小為其自身寬度高度的一半」這個原理卻制約了其實際應用面。innerbox的margin與width、height之間的制約關係，使得動態變化innerbox的內容引起的高度變化沒辦法反應到margin上，除非使用js動態控制，拋開js不說，這種原理實現的垂直居中只能用於innerbox的高寬屬性為固定值的情況。如果要實現innerbox的內容動態變化也能保持垂直居中，則要用下面的

.outbox2


.midbox2


.innbox2
html結構如下：

class="outbox2">


class="midbox2">


class="innbox2"


style="border:1px solid #c00">


垂直居中


匪夷所思的垂直居中


我的部落格我做主的居中


匪夷所思的垂直居中


我的部落格我做主的居中


div>


div>

用css實現水平居中和垂直居中

1.行內元素 inline性質 可以使用 text align center 2.單個塊級元素 margin left和margin right為auto margin 0 auto 3.多個塊級元素 設定不同的display屬性，設定為inline block，乙個是設定為flexbox 或mar...

CSS實現垂直居中

1 最簡單的單行文字line height垂直居中 2 垂直居中，使用line height和vertical align middle 3 使用table布局，display table和display table cell xx 4 絕對居中，使用margin auto和top bottom l...

CSS實現垂直居中

hack技術就可以啊！所以在這裡我還要囉嗦兩句，css中的確是有vertical align屬性，但是它只對 x html元素中擁有valign特性的元素才生效，例如 元素中的 等，而像 這樣的元素是沒有valign特性的，因此使用vertical align對它們不起作用。一 單行垂直居中 如果乙...