CSS水平居中 垂直居中的N個方法 前端開發必收藏

我看最近微博流行css居中技術，老外碼農爭相寫相關的文章，一篇賽一篇的長啊，我把幾篇歸納總結了一下，算是筆記。

不建議用了。

text-align:center

在父容器裡水平居中 inline 文字，或 inline 元素

vertical-align:middle

垂直居中 inline 文字，inline 元素，配合display:table，display:table-cell，有奇效。

line-height

與 height 聯手，垂直居中文字

margin:auto

hello world

有許多 hacks ，負 margin，影子元素 ::before 等。如果你的內容不是固定大小的話，它們大部分是很脆弱的。

translate(-50%,-50%)

用 position 加 translate translate(-50%,-50%) 比較奇特，百分比計算不是以父元素為基準，而是以自己為基準。

示例：

hello world

絕對定位居中

父容器元素：position: relative

.absolute-center

視口居中

內容元素：position: fixed，z-index: 999，記住父容器元素position: relative

.absolute-center.is-fixed

百分比寬高，最大、最小寬度均可以，加 padding 也可以

.absolute-center.is-responsive

只要margin: auto;在，內容塊將垂直居中，top, left, bottom, right 可以設定偏移。

.absolute-center.is-right

居中內容比父容器高時，防止溢位，加overflow: auto（沒有任何 padding 時，也可以加max-height: 100%;）。

.absolute-center.is-overflow

resize屬性可以讓尺寸可調。 設定min- /max-限制尺寸，確定加了overflow: auto。

.absolute-center.is-resizable

影象同樣適用，設定height: auto;

.absolute-center.is-image

高度必須定義，但可以是百分比或 max-height。不想定義高度的話，用display: table（需要考慮 table-cell 相容性）。

.absolute-center.is-variable

確切知道寬高，負 margin 是寬和高的一半。

.is-negative

參考文章：flexible height vertical centering with css, beyond ie7

html結構：

.pos-container.is-table 

.is-table .table-cell 
.is-table .center-block

參考文章：designing css layouts with flexbox is as easy as pie

.pos-container.is-flexbox 

另外乙個總結

CSS水平居中 垂直居中的N個方法

不建議用了。text align center 在父容器裡水平居中 inline 文字，或 inline 元素 vertical align middle 垂直居中 inline 文字，inline 元素，配合 display table display table cell，有奇效。line he...

CSS水平居中 垂直居中的N個方法

不建議用了。text align center 在父容器裡水平居中 inline 文字，或 inline 元素 vertical align middle 垂直居中 inline 文字，inline 元素，配合display table，display table cell，有奇效。line hei...

CSS水平居中 垂直居中的N個方法

我看最近微博流行css居中技術，老外碼農爭相寫相關的文章，一篇賽一篇的長啊，我把幾篇歸納總結了一下，算是筆記。不建議用了。text align center 在父容器裡水平居中 inline 文字，或 inline 元素 vertical align middle 垂直居中 inline 文字，in...