首頁 > web前端 > css教學 > 主體

7種div垂直居中的方法總結

黄舟
發布: 2017-06-01 12:01:44
原創
6225 人瀏覽過

在我們日常Web開發中,會經常使用到CSS和DIV進行佈局,使其頁面更為的美觀,以及體驗效果更佳,那麼怎麼使div以各種居中方式展現出來呢,下面我們就來詳細總結div垂直居中的方法。

CSS實作div垂直居中的方法:

#1.CSS教學之div垂直居中的多種方法

7種div垂直居中的方法總結

在說到這個問題的時候,也許有人會問CSS中不是有vertical-align屬性來設定垂直居中的嗎?即使是某些瀏覽器不支援我只需做少許的CSS Hack技術就可以啊!所以這裡我還要囉嗦兩句,CSS中的確是有vertical-align屬性,但是它只對(X)HTML元素中擁有valign特性的元素才生效,例如表格元素中的

、、等,而像

這樣的元素是沒有valign特性的,因此使用vertical-align對它們不起作用。

2.CSS文字與div垂直居中方法範例分析

7種div垂直居中的方法總結

#在樣式佈局中,我們經常碰到需要將元素居中。透過css實作元素的水平居中較為簡單:對文本,只需要對其父級元素設定text-align: center;,而對p等區塊級元素,只需要設定其left和right的margin值為auto。要實現元素的垂直居中,有人會想到css中的vertical-align屬性,但是它只對擁有valign特性的元素才生效,例如表格元素中的

、 、等,而像

這樣的元素是沒有valign特性的,因此使用vertical-align對它們不起作用。因此我們需要透過別的方法去實現元素的垂直居中,下面我總結了幾種了常用垂直居中方法。

3.【前台】css控制DIV垂直居中

由於這個時候瀏覽器會以圖中綠點所示的位置為預設其實位置。要讓內容居中就要將margin-left和margin-top分別設定為負的寬度一半和搞度一半。

二、div水平垂直置中:

1.利用CSS實現div水平垂直居中

7種div垂直居中的方法總結

實現居中的方案有很多,這篇文章主要介紹了純CSS使用absolute配合margin的方案,margin-top為-(height / 2),margin-left為-(width / 2)。當然也可以不用margin,也就是top為calc(100% - height) / 2,left為calc(100% - width) / 2,但建議可以不用calc()就不要用。

2.css 實作DIV水平垂直居中於螢幕

#css如何將p實作全螢幕水平垂直居中,本章節介紹如何將一個p元素在整個網頁內實現水平垂直居中效果,程式碼是最有說服力的,直接看程式碼。

div垂直居中相關問答:

1.css3 - 如何讓div中的內容水平居中,垂直居中?

2.css - UC手機瀏覽器下如何讓div水平垂直居中?


#【div垂直置中相關文章】

1.css圖片居中:css圖片上下左右居中(水平和垂直居中)

2.div居中:最全的div居中方法總結

3.CSS居中:最全面的CSS居中方法大全

以上是7種div垂直居中的方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!