DIV水平居中 垂直居中

2021-06-22 02:31:43 字數 1554 閱讀 5424

一、css 居中 — 水平居中

div等標籤本身沒有定義自己居中的屬性,網上很多的方法都是介紹用上級的text-align: center,然後巢狀一層div來解決問題。

可是這個方法有時候完全不起作用,而且對於布局是非常不科學的方法。正確的的設定寫法如下(對頁面構造沒有影響):

div

這句css居中的意思就是讓div自己調整左右margin間隔的距離以達到水平居中的效果。

有時候我們還可以簡寫為 div

但這樣的簡寫法,如果你調整 margin-top 或者 margin-bottom 就會失去css居中的水平居中效果。

另外,如果你的div還沒有指定寬度(可以是相對的大小),這種css居中寫法也起不到應有的效果,解決辦法是為這個div指定乙個width寬度,例如: width:auto; 或者 width:50% 之類的。

同時,你的頁面型別即document type必須宣告為xhtml。至於鬆散還是嚴格都不影響。

這個寫法也適用於img和一些其他的盒狀標籤的css居中。

最後,假如你在ie和firefox兩個瀏覽器中看起來不一樣,你最好採用 text-align:center; 和 margin 兩個css居中一起設定的方法。例如:

#layout 

#center

說明:首先在父級元素定義text-align: center;這個的意思就是在父級元素內的內容居中;對於ie這樣設定就已經可以了。但在mozilla中不能居中。解決辦法就是在子元素定義時候設定時再加上「margin-right: auto;margin-left: auto; 」需要說明的是,如果你想用這個方法使整個頁面要居中,建議不要套在乙個div裡,你可以依次拆出多個div,只要在每個拆出的div裡定義margin -right: auto;margin-left: auto; 就可以了。

二. css居中 — 垂直居中

1. 如何使在div 中垂直居中

對這個css居中問題,我們可以使用設定背景的方法。舉例:

body

關鍵就在於這個center屬性,它表示讓該背景在容器中居中。你也可以把cener換成top left或者直接寫上數字來調整它的位置。

2.如何使文字在div中垂直居中

對於文字,便不能用背景方法,可以用增高行距的辦法變通實現垂直居中,示範**如下:

#center

test content

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

3.css+div控制頁面中元素垂直居中**,實現全域性和區域css垂直居中

示範**:

另一css居中方法:

加一種css水平垂直居中方法,本方法在www.chinaret.com中使用.

#loginbar { position: absolute; left:50%; top:50%; margin-top: -68px; z-index: 1; margin-left: -150px; width: 300px;  

height: 156px;text-align:left;

div水平居中及div水平垂直居中的方法總結

1 margin auto wrap wrap txt2 text align center 3 absolute margin偏移 wrap wrap txt4 display box 文字 box pack5 absolute transform 1 line height 文字 wrap tx...

DIV水平垂直居中顯示

div水平居中顯示 定義 div寬度後,設定 即可實現 div水平居中,示例 css 1.html 1.class cdiv fufuok.com div水平垂直居中顯示 將 left 和top 設定為50 來定位div 到瀏覽器 再將 margin left 和margin top 值設定為寬和高...

div文字水平垂直居中

文字居中 text align 屬性為文字水平設定,屬性有center 居中 inherit 繼承父物件的屬性 justify 兩端對齊 left 左對齊 right 右對齊 vertical align 屬性為文字垂直設定,屬性有baseline 基線 bottom inherit 繼承父物件的屬...