關於元素垂直居中的那些事

2021-08-21 20:36:50 字數 807 閱讀 4916

程式設計之道無遠弗屆，御晨風而返。———— 傑佛瑞 · 詹姆士

這個方法是把元素外邊距設為負值（自身寬高的一半），來實現垂直居中。

html


css.box


.main
##二、用margin:auto;居中 ##

給子元素絕對定位以後，上下左右都為0，在設定乙個margin為 auto ， 這裡一定要是auto。

html


css.box


.main
這個辦法先給父級相對定位，在給子元素絕對定位然後利用css3的平移效果使元素垂直居中。也是非常方便的。

html


css.box


.main
用css2的內容就可以垂直居中，這個辦法相容性好，大部分瀏覽器都已經支援，給兩個子元素行內快垂直居中，然後給乙個元素寬度為0，高度100%，在給父級乙個文字居中。就可以實現讓元素在內部垂直居中。

html


css.box


.main


span
給父元素設定為彈性盒子，在主軸居中和垂直交叉軸居中就ok啦。是不是簡單方便，但是前提要相容性好。

html


css.box


.main

簡單列舉了讓元素垂直居中的幾個方法，都親測有效，這些方法相容性都不同因此根據不同環境用不同方法。如果有什麼不同方法或者更好意見歡迎私我討論。

元素垂直居中

1 單行文字的居中 主要實現css 水平居中 text align center 垂直居中 line height xxpx line height與元素的height的值一致 我們先來看這樣乙個例子，加入我們這裡有乙個div，寬度和高度為300px，背景顏色為黑色，然後在div中有一行簡短文字，我...

知識點滴 HTML5元素垂直居中那些事

一 摘要 讓乙個元素水平居中對於css來說非常簡單 如果是乙個內聯元素，我們可以在他的父元素上設定text align center 如果是乙個塊元素，我們可以使用margin auto 然而，只要一想到讓乙個元素垂直居中，讓人死的心都有了。多年來，垂直居中已成為css的不朽神話，也是前端專業人士群...

知識點滴 HTML5元素垂直居中那些事

讓乙個元素水平居中對於css來說非常簡單 如果是乙個內聯元素，我們可以在他的父元素上設定text align center 如果是乙個塊元素，我們可以使用margin auto 然而，只要一想到讓乙個元素垂直居中，讓人死的心都有了。多年來，垂直居中已成為css的不朽神話，也是前端專業人士群體中的乙個...