昨天面試被問到這個問題，自己常用的是方法一和方法二，回來後查閱到了方法三，感覺莫名的好用，記錄一下~
水平居中 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中有一行簡短文字，我...