CSS如何實現垂直居中

2021-10-07 16:07:15 字數 773 閱讀 9617

1.vertical-align 。該屬性可以設定元素的垂直居中，但是該屬性是應用於內聯元素和display:table-cell的元素。所以，我們可以將父元素設定為display:table，再把子元素設定為display:table-cell。

partent


child
2. 彈性盒子居中。設定margin:auto. 可以使得彈性子元素在兩上軸方向上完全居中.

parent


child
3. 彈性布局。彈性布局預設主軸為row（從左到右）,側軸為colum（從上到下）。align-item:center設定子元素在側軸方向上居中對齊。

parent
4.定位。父元素設定相對定位，子元素設定絕對定位，top:50%。此時子元素左上角而不是中心點移至父元素的50%高度，所以子元素自身需上移50%。

parent


child
5.設定偽元素。偽元素預設display:inline。需設定為block/inline-block。再設定vertical:middle。

parent:after


child
yezijiang~

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對它們不起作用。一 單行垂直居中 如果乙...

css實現垂直居中

一 單行內容的居中 設定height與line height相等，overflow hidden即可。demo height 20px line height 20px overflow hidden 注 若不使用overflow hidden，在瀏覽器頁面縮放時會出現問題。二 div垂直居中 注意...