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

不建議用了。

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個方法

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

css 水平居中 垂直居中 水平垂直居中

一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...