webkit功能设置 css没设宽度如何居中？
css没设宽度如何居中？
很多新手在写css的时候经常遇到的一个问题，当div没有固定的宽度或者高度的时候，如何才能让div水平或者垂直居中显示。
如果div有固定宽度的话，用padding，margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况，我们就不能用margin,padding设置固定的距离了。这个问题让很多人头疼。而怎么样才能让这个div居中显示呢？其实这种情况解决的办法也是有很多种，js，css都可以实现。
这里主要介绍一下采用css的方法，有什么问题还请各位看官指出。
方法一：
用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。
html如下：
XML/HTML Code复制内容到剪贴板
ltdivclass#34block#34style#34height:300px#34gt
ltdivclass#34centered#34gt
lth1gthaorooms案例题目lt/h1gt
ltpgthaorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容lt/pgt
lt/divgt
lt/divgt
css如下：
CSS Code复制内容到剪贴板
/*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复制内容到剪贴板
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复制内容到剪贴板
ltdivclass#34something-semantic#34gt
ltdivclass#34something-else-semantic#34gt
Unknownstufftobecentered.
lt/divgt
lt/divgt
css:
CSS Code复制内容到剪贴板
.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复制内容到剪贴板
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内核的浏览器，其他内核浏览器写法如下：
CSS Code复制内容到剪贴板
-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复制内容到剪贴板
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%
手机怎么设置兼容性站点网址？
手机是没有兼容性模式的。
因为兼容性模式是针对pc端的网页和浏览器一种模式。
所谓兼容性模式是pc端的一些浏览器可能存在双核的浏览器，一个是webkit内核一个ie浏览器的内核，一般兼容性模式指的是切换到IE浏览器内核的模式下，因为很多之前的网页都是基于IE浏览器开发，在webkit内核下的浏览器可能会出现一些显示的不正确的兼容性问题。
而针对高版本的IE浏览器兼容模式就是使用版本较低的IE浏览器来解析网页，这也是针对之前老网站针对低版本IE浏览器的网页。
手机端之所以没有兼容模式那是因为手机端的浏览器都是基于webKit内核，没有针对ie浏览器内核的手机端浏览器，所以不会出现兼容性的问题。
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
