昨天面試被問到這個問題,自己常用的是方法一和方法二,回來後查閱到了方法三,感覺莫名的好用,記錄一下~
水平居中 margin: 0 auto;+垂直位移position: relative;top: 50%;
注意:此時當前操作元素的頭部到達頁面一半的水平線處,
最後使用transform: translatey(-50%),使得元素向上平移(translate)自身高度的一半(50%)
容器設為display:table,使他成為乙個塊級**元素,子元素display:table-cell使子元素成為**單元格,
然後就像在**裡一樣,給子元素加個vertical-align: middle就行了,從而實現多行文字垂直居中
此外,display: table還能解決多列自適應布局和等高布局,如下:
display:table系列幾乎是和table系的元素相對應的:
table
(類似 )此元素會作為塊級**來顯示,**前後帶有換行符。
inline-table
(類似 )此元素會作為內聯**來顯示,**前後沒有換行符。
table-row-group
(類似 )此元素會作為乙個或多個行的分組來顯示。
table-header-group
(類似 )此元素會作為乙個或多個行的分組來顯示。
table-footer-group
(類似 )此元素會作為乙個或多個行的分組來顯示。
table-row
(類似 )此元素會作為乙個**行顯示。
table-column-group
(類似 )此元素會作為乙個或多個列的分組來顯示。
table-column
(類似 )此元素會作為乙個單元格列顯示。
table-cell
(類似 和 )此元素會作為乙個**單元格顯示。
table-caption
(類似 )此元素會作為乙個**標題顯示。
「display:table;」的css宣告能夠讓乙個html元素和它的子節點像table元素一樣。使用基於**的css布局,使我們能夠輕鬆定義乙個單元格的邊界、背景等樣式,而不會產生因為使用了table那樣的製表標籤所導致的語義化問題。
如何使元素垂直水平居中
在css中使元素垂直水平居中十分常見,那麼我來拋磚引玉,分享幾種我知道的方法 1.彈性盒方法 flex布局 元素 display flex justify content center align items center 2.定位 transform 父元素 position relative 子...
使元素水平和垂直居中
一 對行級元素水平垂直居中 text align center heiht與line height的值一樣 二 對塊級元素垂直居中對齊 1 flex布局 parent 2 父元素高度固定 2.1 position 子元素已知寬度 父元素設定為 position relative 子元素設定為 pos...
元素垂直居中
1 單行文字的居中 主要實現css 水平居中 text align center 垂直居中 line height xxpx line height與元素的height的值一致 我們先來看這樣乙個例子,加入我們這裡有乙個div,寬度和高度為300px,背景顏色為黑色,然後在div中有一行簡短文字,我...