专业的广州网站建设公司、广州网站设计制作公司为您服务,电话:020-85548809,29883069
新闻中心
专业专注专心,行业行情行规
分享交流,永无止境,我们愿与您共同进步

网站建设之层水平居中和垂直居中代码

发布日期:[2010/1/13]   编辑:奇亿广州网站建设

网站建设经常遇到层的水平居中和垂直居中设置,特别是DIV+CSS网站布局中更是家常便饭。现提供如何使层垂直居中和水平居中以及绝对于浏览器居中的代码。

层垂直居中,设置层的line-height等于height高度即可实现,如下
#div {
 height:30px;
 line-height:30px;
}

层水平居中CSS代码:
#div {
        margin:0 auto;
}

如需要使层垂直水平于浏览器居中,则可使用外补丁margin负值的方法,即负值为层自身宽度、高度除以2,如一个宽度400高度300的层需要绝对于浏览器居中,则使用绝对定位然后设置距离浏览器上与左都为50%,margin-top的值为-150,而margin-left的值为-200。
以下为层在浏览器绝对居中的CSS代码:
#div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
}

调用
<div id="div">垂直居中或水平居中的层</div>

广州建网站、广州做网站
或者将本文《网站建设之层水平居中和垂直居中代码》收藏和分享到:
复制本文《网站建设之层水平居中和垂直居中代码》地址给好友: