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

2021-07-04 14:25:00 字數 2629 閱讀 1886

不建議用了。

text-align:center

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

vertical-align:middle

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

line-height

與 height 聯手，垂直居中文字

margin:auto

#ex2_container


#ex2_content


id="ex2_container">


id="ex2_content">hello worlddiv>


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

translate(-50%,-50%)

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

示例：

#ex3_container


#ex3_content


id="ex3_container">


id="ex3_content">hello worlddiv>


div>
這個技巧相當囂張，同樣適用於沒固定大小的內容，min-width，max-height，overflow:scroll等。

父容器元素：position: relative

.absolute-center
注意：高度必須定義，建議加 overflow: auto，防止內容溢位。

內容元素：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結構：

class="pos-container is-table">


class="table-cell">


class="center-block">


div>


div>


div>
css樣式：

.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 hei...

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...