webkit功能設(shè)置 css沒設(shè)寬度如何居中？
css沒設(shè)寬度如何居中？很多新手在寫css的時候經(jīng)常遇到的一個問題，當(dāng)div沒有固定的寬度或者高度的時候，如何才能讓div水平或者垂直居中顯示。如果div有固定寬度的話，用padding，margin
css沒設(shè)寬度如何居中？
很多新手在寫css的時候經(jīng)常遇到的一個問題，當(dāng)div沒有固定的寬度或者高度的時候，如何才能讓div水平或者垂直居中顯示。
如果div有固定寬度的話，用padding，margin都很容易實現(xiàn)。方法有很多種。不過經(jīng)常遇到這種div沒有固定的寬度高度的情況，我們就不能用margin,padding設(shè)置固定的距離了。這個問題讓很多人頭疼。而怎么樣才能讓這個div居中顯示呢？其實這種情況解決的辦法也是有很多種，js，css都可以實現(xiàn)。
這里主要介紹一下采用css的方法，有什么問題還請各位看官指出。
方法一：
用一個“ghost”偽元素（看不見的偽元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是這個方法要求待居中的元素是 inline-block，不是一個真正通用的方案。
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寫法比較費時，你也可以用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只是針對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%)
有些彈出層的樣式，也可以用這個方法居中
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垂直居中代碼要點：
父容器vc的css屬性 display:tableoverflow:hidden
子容器vci的css屬性 vertical-align:middledisplay:table-cell
針對ie6的hack，vci容器的 _position:absolute_top:50% 和content容器的 _position:relative _top:-50%
手機怎么設(shè)置兼容性站點網(wǎng)址？
手機是沒有兼容性模式的。
因為兼容性模式是針對pc端的網(wǎng)頁和瀏覽器一種模式。
所謂兼容性模式是pc端的一些瀏覽器可能存在雙核的瀏覽器，一個是webkit內(nèi)核一個ie瀏覽器的內(nèi)核，一般兼容性模式指的是切換到IE瀏覽器內(nèi)核的模式下，因為很多之前的網(wǎng)頁都是基于IE瀏覽器開發(fā)，在webkit內(nèi)核下的瀏覽器可能會出現(xiàn)一些顯示的不正確的兼容性問題。
而針對高版本的IE瀏覽器兼容模式就是使用版本較低的IE瀏覽器來解析網(wǎng)頁，這也是針對之前老網(wǎng)站針對低版本IE瀏覽器的網(wǎng)頁。
手機端之所以沒有兼容模式那是因為手機端的瀏覽器都是基于webKit內(nèi)核，沒有針對ie瀏覽器內(nèi)核的手機端瀏覽器，所以不會出現(xiàn)兼容性的問題。