前端常用的元素垂直居中寫法!

2021-09-05 09:32:16 字數 2217 閱讀 4317

在前端開發過程中,盒子居中是常常用到的。其中 ,居中又可以分為水平居中和垂直居中。水平居中是比較容易的,直接設定元素的margin: 0 auto就可以實現。但是垂直居中相對來說是比較複雜一些的。下面我們一起來討論一下實現垂直居中的方法。

首先,定義乙個需要垂直居中的div元素,他的寬度和高度均為300px,背景色為橙色。**如下: 

效果如下:

很好,已經實現水平居中了!接下來該打大boss了——實現垂直居中。不過,在這之前,我們先要設定div元素的祖先元素html和body的高度為100%(因為他們預設是為0的),並且清除預設樣式,即把margin和padding設定為0(如果不清除預設樣式的話,瀏覽器就會出現滾動條,聰明的親,自己想想問什麼)。

接下來,需要做的事情就是要讓div往下移動了。我們都知道top屬性可以使得元素向下偏移的。但是,由於預設情況下,由於position的值為static(靜止的、不可以移動的),元素在文件流裡是從上往下、從左到右緊密的布局的,我們不可以直接通過top、left等屬性改變它的偏移。所以,想要移動元素的位置,就要把position設定為不是static的其他值,如relative,absolute,fixed等。然後,就可以通過top、bottom、right、left等屬性使它在文件中發生位置偏移(注意,relative是不會使元素脫離文件流的,absolute和fixed則會!也就是說,relative會佔據著移動之前的位置,但是absolute和fixed就不會)。設定了position: relative後的**如下:

我們重新整理一下頁面,發現跟之前是沒有任何變化的,因為,我們僅僅是使設定了元素的position=relative而已,但是還沒開始移動他的垂直偏移。好,下面我們就讓它偏移吧!垂直偏移需要用到top屬性,它的值可以是具體的畫素,也可以是百分數。因為我們現在不知道父元素(即body)的具體高度,所以,是不可以通過具體畫素來偏移的,而應該用百分數。既然是要讓它居中嘛!好,那麼我們就讓它的值為50%不就行了嗎?問題真的那麼簡單,我們來試一下,就設定50%試一下:

效果如下圖所示:

通過觀察上圖,只要讓div的中心移動到紅線的位置,那麼整個div就居中了。那怎麼讓它中心移動到紅線處呢?從圖中可以觀察到,從div的中心到紅線的距離是div自身高度的一半。這時候,我們可以使用通過margin-top屬性來設定,因為div的自身高度是300,所以,需要設定他的margin-top值為-150。為什麼是要設定成負數的呢?因為正數是向下偏移,我們是希望div向上偏移,所以應該是負數,如下:

效果如下:

確實已經居中了。好興奮!有木有?!

除了可以使用margin-top把div往上偏移之外,css3的transform屬性也可以實現這個功能,通過設定div的transform: translatey(-50%),意思是使得div向上平移(translate)自身高度的一半(50%)。如下:

效果如下:

效果:

除了上面3中方法之外,當然可能還存在許多的可以實現垂直居中的方法。比如可以將父容器設定為display:table ,然後將子元素也就是要垂直居中顯示的元素設定為 display:table-cell 。但是,這是不值得推薦的,因為會破壞整體的布局。如果用table布局,那麼為什麼不直接使用table標籤了?那不更加方便嗎?

元素垂直居中

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

前端元素垂直水平居中的多個方法

建立乙個bfc,高度坍塌 居中 margin重合問題均可解決 1 浮動元素float不為none 2 絕對定位或固定定位 position absolute fixed 3 行內元素 display inline block 4 overflow不為visible的塊級元素 5 display值為f...

前端頁面中元素的水平垂直居中對齊

這是最簡單的,直接在元素屬性中使用text align center 讓文字水平居中,再通過行高 line height 元素的高度 讓文字垂直居中對齊 html布局 css樣式 效果展示 注意點 text align是對塊元素的特質,內部必須是行內元素等,如果裡面div也想水平居中,可以設定dis...