css沒設(shè)寬度如何居中？很多新手在寫css的時(shí)候經(jīng)常遇到的一個(gè)問題，當(dāng)div沒有固定的寬度或者高度的時(shí)候，如何才能讓div水平或者垂直居中顯示。如果div有固定寬度的話，用padding，margin

css沒設(shè)寬度如何居中？

很多新手在寫css的時(shí)候經(jīng)常遇到的一個(gè)問題，當(dāng)div沒有固定的寬度或者高度的時(shí)候，如何才能讓div水平或者垂直居中顯示。

如果div有固定寬度的話，用padding，margin都很容易實(shí)現(xiàn)。方法有很多種。不過經(jīng)常遇到這種div沒有固定的寬度高度的情況，我們就不能用margin,padding設(shè)置固定的距離了。這個(gè)問題讓很多人頭疼。而怎么樣才能讓這個(gè)div居中顯示呢？其實(shí)這種情況解決的辦法也是有很多種，js，css都可以實(shí)現(xiàn)。

這里主要介紹一下采用css的方法，有什么問題還請(qǐng)各位看官指出。

方法一：

用一個(gè)“ghost”偽元素（看不見的偽元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是這個(gè)方法要求待居中的元素是 inline-block，不是一個(gè)真正通用的方案。

html如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

ltdivclass#34block#34style#34height:300px#34gt

ltdivclass#34centered#34gt

lth1gthaorooms案例題目lt/h1gt

ltpgthaorooms案例內(nèi)容，haorooms案例內(nèi)容haorooms案例內(nèi)容haorooms案例內(nèi)容haorooms案例內(nèi)容haorooms案例內(nèi)容haorooms案例內(nèi)容haorooms案例內(nèi)容haorooms案例內(nèi)容lt/pgt

lt/divgt

lt/divgt

css如下：

CSS Code復(fù)制內(nèi)容到剪貼板

/*Thisparentcanbeanywidthandheight*/

.block{

text-align:center

}

/*Theghost,nudgedtomaintainperfectcentering*/

.block:before{

content:#34#34

display:inline-block

height:100%

vertical-align:middle

margin-right:-0.25em/*Adjustsforspacing*/

}

/*Theelementtobecentered,can

alsobeofanywidthandheight*/

.centered{

display:inline-block

vertical-align:middle

width:50%

}

方法二：

可以用table布局方法，但是這種方法也有局限性！

寫法如下：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

lttablestyle#34width:100%#34gt

lttrgt

lttdstyle#34text-align:centervertical-align:middle#34gt

Unknownstufftobecentered.

lt/tdgt

lt/trgt

lt/tablegt

由于table寫法比較費(fèi)時(shí)，你也可以用div代替table,寫法如下：

html：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

ltdivclass#34something-semantic#34gt

ltdivclass#34something-else-semantic#34gt

Unknownstufftobecentered.

lt/divgt

lt/divgt

css:

CSS Code復(fù)制內(nèi)容到剪貼板

.something-semantic{

display:table

width:100%

}

.something-else-semantic{

display:table-cell

text-align:center

vertical-align:middle

}

方法三，終極解決方法：

以上2中方法可能都有其局限性，我介紹的第三中方法是比較成熟的不是固定高寬div的垂直居中的方法！但是方法是css3的寫法，想兼容IE8的童鞋們，建議用上面的方法！

方法和我們固定高寬的差不多，但是不用margin我們用的是 translate()

demo如下：

CSS Code復(fù)制內(nèi)容到剪貼板

lt!DOCTYPEhtmlPUBLIC#34-//W3C//DTDXHTML1.0Strict//EN#34##34gt

lthtmlxmlns##34xml:lang#34en#34gt

ltheadgt

ltmetahttp-equiv#34Content-Type#34content#34text/htmlcharsetUTF-8#34gt

lttitlegthaorooms不固定高度div寫法lt/titlegt

ltstylegt

.center{

position:fixed

top:50%

left:50%

background-color:#000

width:50%

height:50%

-webkit-transform:translateX(-50%)translateY(-50%)

}

lt/stylegt

lt/headgt

ltbodygt

ltdivclass#34center#34gtlt/divgt

lt/bodygt

lt/htmlgt

我上面的css只是針對(duì)webkit內(nèi)核的瀏覽器，其他內(nèi)核瀏覽器寫法如下：

CSS Code復(fù)制內(nèi)容到剪貼板

-webkit-transform:translateX(-50%)translateY(-50%)

-moz-transform:translateX(-50%)translateY(-50%)

-ms-transform:translateX(-50%)translateY(-50%)

transform:translateX(-50%)translateY(-50%)

有些彈出層的樣式，也可以用這個(gè)方法居中

CSS Code復(fù)制內(nèi)容到剪貼板

position:fixed

top:50%

left:50%

width:50%

max-width:630px

min-width:320px

height:auto

z-index:2000

visibility:hidden

-webkit-backface-visibility:hidden

-moz-backface-visibility:hidden

backface-visibility:hidden

-webkit-transform:translateX(-50%)translateY(-50%)

-moz-transform:translateX(-50%)translateY(-50%)

-ms-transform:translateX(-50%)translateY(-50%)

transform:translateX(-50%)translateY(-50%)

無固定高度的div垂直居中代碼要點(diǎn)：

父容器vc的css屬性 display:tableoverflow:hidden

子容器vci的css屬性 vertical-align:middledisplay:table-cell

針對(duì)ie6的hack，vci容器的 _position:absolute_top:50% 和content容器的 _position:relative _top:-50%

手機(jī)怎么設(shè)置兼容性站點(diǎn)網(wǎng)址？

手機(jī)是沒有兼容性模式的。

因?yàn)榧嫒菪阅Ｊ绞轻槍?duì)pc端的網(wǎng)頁(yè)和瀏覽器一種模式。

所謂兼容性模式是pc端的一些瀏覽器可能存在雙核的瀏覽器，一個(gè)是webkit內(nèi)核一個(gè)ie瀏覽器的內(nèi)核，一般兼容性模式指的是切換到IE瀏覽器內(nèi)核的模式下，因?yàn)楹芏嘀暗木W(wǎng)頁(yè)都是基于IE瀏覽器開發(fā)，在webkit內(nèi)核下的瀏覽器可能會(huì)出現(xiàn)一些顯示的不正確的兼容性問題。

而針對(duì)高版本的IE瀏覽器兼容模式就是使用版本較低的IE瀏覽器來解析網(wǎng)頁(yè)，這也是針對(duì)之前老網(wǎng)站針對(duì)低版本IE瀏覽器的網(wǎng)頁(yè)。

手機(jī)端之所以沒有兼容模式那是因?yàn)槭謾C(jī)端的瀏覽器都是基于webKit內(nèi)核，沒有針對(duì)ie瀏覽器內(nèi)核的手機(jī)端瀏覽器，所以不會(huì)出現(xiàn)兼容性的問題。