CSS實現垂直居中

1、最簡單的單行文字line-height垂直居中

************

2、垂直居中，使用line-height和vertical-align:middle

3、使用table布局，display:table和display:table-cell

******************xx

4、絕對居中，使用margin:auto和top、bottom、left、right同設為0

5、使用flex布局，display:flex和justify-content:center水平居中，align-items:center垂直居中

6、使用margin負值（缺點是必須知道寬高）

7、使用transform:translate(-50%,-50%)，移動端用的較多，可以不用知道寬高

8、使用display:-webkit-box，設定-webkit-box-pack:center和-webit-box-align:center;

hack技術就可以啊！所以在這裡我還要囉嗦兩句，css中的確是有vertical align屬性，但是它只對 x html元素中擁有valign特性的元素才生效，例如元素中的等，而像這樣的元素是沒有valign特性的，因此使用vertical align對它們不起作用。一單行垂直居中如果乙...

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

還可以參看文章不需要知道子元素的尺寸方法一單行文字居中 line height height 方法二父元素使用display table和子元素使用display table cell屬性來模擬子元素設定vertical align middle vertical align屬性只對行內元...