如何讓div水平和垂直居中,如何讓DIV水平和垂直居中

2022-03-01 21:30:53 字數 5626 閱讀 9581

1樓:有恃無恐

說明,本文中所指的div包括html頁面中所有的元素。

讓一個div水平居中,直接用css就可以做到。只要設定了div的寬度,然後使用margin設定邊距0

auto,css自動算出左右邊距,使得div居中。

.mydiv但是如果要使div垂直方向也居中,恐怕css需要修改了。

css實現水平和垂直居中

要讓div水平和垂直居中,必需知道該div得寬度和高度,然後設定位置為絕對位置,距離頁面視窗左邊框和上邊框的距離設定為50%,這個50%就是指頁面視窗的寬度和高度的50%,最後將該div分別左移和上移,左移和上移的大小就是該div寬度和高度的一半。

.mydiv該方法使用普遍,但是前提是必需設定div的寬度和高度。如果當頁面div寬度和高度是動態的,比方說需要彈出一個div層並且要居中顯示,div的內容是動態的,所以寬度和高度也是動態的,這時需要用jquery可以解決居中。

jquery實現水平和垂直居中

jquery實現水平和垂直居中的原理就是通過jquery設定div的css,獲取div的左、上的邊距偏移量,邊距偏移量的演算法就是用頁面視窗的寬度減去該div得寬度,得到的值再除以2即左偏移量,右偏移量演算法相同。注意div的css設定要在resize()方法中完成,就是每次改變視窗大小時,都要執行設定div的css,**如下:

$(window).resize(function());});此外在頁面載入時,就需要呼叫resize()。$(function());此方法的好處就是不需要知道div的具體寬度和高度大小,直接用jquery就可以實現水平和垂直居中,而且相容各瀏覽器,這個方法在很多的彈出層效果中應用。

2樓:老夭來了

主要的樣式定義如下:

body

#center

說明:首先在父級元素定義text-align: center;這個的意思就是在父級元素內的內容居中;對於ie這樣設定就已經可以了。

但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上「margin-right: auto;margin-left:

 auto; 」

需要說明的是,如果你想用這個方法使整個頁面要居中,建議不要套在一個div裡,你可以依次拆出多個div,只要在每個拆出的div裡定義margin-right: auto;margin-left: auto; 就可以了。

如何使**在div 中垂直居中

用背景的方法。舉例:

body

關鍵就是最後的center,這個引數定義**的位置。還可以寫成「top left」(左上角)或者"bottom right"等,也可以直接寫數值"50 30"。

如果是文字,便不能用背景方法,可以用增高行距的辦法變通實現垂直居中,完整**如下:

test content

說明:vertical-align:middle;表示行內垂直居中,我們將行距增加到和整個div一樣高line-height:200px;然後插入文字,就垂直居中了。

如何使文字在div中水平和垂直居中的css**,

水平垂直居中

3樓:匿名使用者

使文字在抄div中水平

和垂直居中的襲的css樣式為

text-align:center; /*水平居中*/line-height: 20px; /*行距設為與div高度一致*/

示例如下:

html元素

水平垂直居中

css樣式

div顯示效果

4樓:匿名使用者

margin:0 auto;//水平居中

自己的height和父元素的lineheight一樣可以垂直居中

5樓:匿名使用者

一個比copy較簡單的方法就是這樣:

你們假bai設你的div是高度100px,寬度du是1000px,那你這樣寫,你的zhi文字就會水平dao垂直居中:

水平垂直居中

css是這樣的,text-align:center意思就是說,讓這個div裡的文字水平居中,而line-height:100px;的意思是說,讓div裡面的每一行文字,佔的高度為100px(和那個div的高度一樣),這樣,文字就垂直居中了。

也就是說,如果你的div是200px高,那你就讓line-height:200px;文字就會垂直居中了。

不知道說明白沒有。不行,你再hi我好了。

6樓:繁華花

div

7樓:談慧

水平垂bai直du

居中zhi

div希望你dao能看版

懂!權!

如何使文字在div中水平和垂直居中的css**

8樓:

可以用「text-align」屬性和「line-height」屬性。

1、新建html檔案,在body標籤中新增div標籤,在div標籤輸入文字,這裡以「演示文字」為例,給div標籤設定寬度、高度和背景色屬性,屬性值分別為200、100和灰色,這時「演示文字」預設位置為div盒子的左上方:

2、這時給div標籤新增上「text-align」屬性,屬性值為「center」,這時文字將會在div容器中水平居中:

3、這時給div標籤新增行高「ling-height」屬性,屬性值為高度的值「100px」,再新增「vertical-align」屬性,屬性值為「middle」,這時文字將會水平垂直都居中:

9樓:藝術流氓

水平位置居中可以使用css屬性text-align來控制text-align:center; //文字居中如果需要文字垂直位置居中解決方法一般使用設定文字的行高和父級元素高度一致的辦法來做

例如文字文字文字文字

10樓:布吉島深深

text-align: center;

vertical-align: middle;

11樓:匿名使用者

text-align: center;水平

line-height:div的高度;垂直

如何讓div裡的dl水平垂直居中???

12樓:222傻豬

首相你再css樣式的文字里加上 這個*清除標籤原有屬性,然後你給dl新增一個類.center給外面的div加一個類或者id 總之是給外面的div加一個寬度,比如.div

......

這樣就可以了,想看效果,你可以給每個類新增不同的背景顏色,這樣方便看,上面的不要複製,因為有的標點是中文輸入法下的

margin:0 auto;這一行就是居中的意思,margin是邊距,他原本有四個值分別是上右下左,四個方向外邊距,如果是兩個的話就是上下,和左右,auto是適應的意思,margin:0 auto ;就是上下外邊距是0,左右適中,

13樓:網名註冊

水平居中用text-align:center;

垂直居中用行高來控制:line-height:數值;

方法一:

水平居中、垂直居中

...方法二:內嵌式樣式表

http://www.w3.org/1999/xhtml">水平垂直居中

水平垂直居中

方法三:引入外部css樣式表

http://www.w3.org/1999/xhtml">水平垂直居中

水平垂直居中

style.css裡面寫:

.div dl dd

14樓:飛啊飛

div:texe-align:center

如何讓一個div水平,垂直方向都居中於瀏覽器?

15樓:匿名使用者

讓層垂直居中於瀏覽器視窗

其實解決的思路是這樣的:首們

版需要position:absolute;絕對定位。權而層的定位點,使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以二。

如:一個層寬度是400,高度是300。使用絕對定位距離上部與左部都設定成50%。

而margin-top的值為-150。margin-left的值為-200。這樣我們就實現了層垂直居中於瀏覽器的樣式編寫。

16樓:匿名使用者

在css樣式中,定義

margin-left:auto;

margin-right:auto;

17樓:汲城濮昊昊

讓層垂直居中於瀏覽器視窗

其實解決的思路是這樣的:首們需要position:absolute;絕對定位內。而層的定位點,使用外補丁容margin負值的方法。負值的大小為層自身寬度高度除以二。

如:一個層寬度是400,高度是300。使用絕對定位距離上部與左部都設定成50%。

而margin-top的值為-150。margin-left的值為-200。這樣我們就實現了層垂直居中於瀏覽器的樣式編寫。

如何讓div裡面的div水平垂直居中

18樓:匿名使用者

div實現水平居中只需要設定固定寬度和margin:0 auto即可,

給你2個解決方案:

1、條件是div的高度和寬度是固定的

讓層垂直居中

其實解決的思路是這樣的:首們需要position:absolute;絕對定位。而層的定位點,使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以二。

如:一個層寬度是400,高度是300。使用絕對定位距離上部與左部都設定成50%。

而margin-top的值為-150。margin-left的值為-200。這樣我們就實現了層垂直居中於父級層的樣式編寫。

2、條件是div的高度和寬度是不固定的

如果div寬度不固定,那用div就有點困難了,雖然用js獲取當前高寬再附加css可以解決,但是要用到js來解決問題就有點遜了;

我給你一個思路,你不妨試試table佈局,table不設定寬度的情況下預設是寬度和高度都是最小化的,這樣給table設定margin:0 auto就可以讓這個table水平方向居中;

解決了水平居中,那就來解決垂直居中,td中的內容預設是垂直居中的,那麼只要兩者互相巢狀一下不就解決水平垂直居中了!

但是有一個問題,你所需要垂直居中的父級table的高度是否固定,如果父級高度固定,那麼子級高度不固定也一樣可以垂直居中

19樓:開心變變變

讓div裡面的div水平垂直居中有2種方法:

方法一:

讓一個div水平居中,直接用css就可以做到。只要設定了div的寬度,然後使用margin設定邊距0 auto,css自動算出左右邊距,使得div居中。

.mydiv

方法二:

要讓div水平和垂直居中,必需知道該div得寬度和高度,然後設定位置為絕對位置,距離頁面視窗左邊框和上邊框的距離設定為50%,這個50%就是指頁面視窗的寬度和高度的50%,最後將該div分別左移和上移,左移和上移的大小就是該div寬度和高度的一半。

.mydiv

該方法使用普遍,但是前提是必需設定div的寬度和高度。如果當頁面div寬度和高度是動態的,比方說需要彈出一個div層並且要居中顯示,div的內容是動態的,所以寬度和高度也是動態的,這時需要用jquery可以解決居中。

divcss如何實現div的垂直,水平居中自適應的那

垂直水du平zhi都可以 dao居內中。容 auto 就是自適應 我一般有這樣的頁面的話,都是在div中插入一個100 高寬的 設定 屬性垂直居中和水平居中 margin auto 樓上的 vertical align middle 只是針對文字居中,對於物件是無效的 插一個寬度為100 的div,...

如何讓div水平垂直方向都居中於瀏覽器

讓層垂直居中於瀏覽器視窗 其實解決的思路是這樣的 首們 版需要position absolute 絕對定位。權而層的定位點,使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以二。如 一個層寬度是400,高度是300。使用絕對定位距離上部與左部都設定成50 而margin top的值為 ...

怎樣讓html中的文字垂直水平居中顯示

可以在html語言中設定屬性align屬性,使align的屬性等於center可以實現效果 當然你也可以在css語句語句中進行設定或者在head標籤中進行選擇器的設定,選擇標籤 1.水平居 bai中 text align center 水平居中du line height 20px 行距設為與div...