css屏幕居中的方法(推荐)

当前位置 : 首页 > 网页制作 > CSS > css屏幕居中的方法(推荐)

css屏幕居中的方法(推荐)

来源: 作者: 时间:2015-11-23 09:25
css实现的页面元素屏幕垂直居中的方法,需要的朋友可以参考下。
css实现的页面元素屏幕垂直居中的方法,需要的朋友可以参考下。

复制代码
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
div {
position:absolute; //绝对定位
top:50%; //距顶部50%
left:50%;
margin:-100px 0 0 -200px; //设定这个div的margin-top的负值为自身的高度的一半,margin-left的值也是自身的宽度的一半的负值.(感觉在绕口令)
width:400px; //宽为400,那么margin-top为-200px
height:200px; //高为200那么margin-left为-100px;
border:1px solid red;
line-height:200px;
font-size:16px;
text-align:center;
z-index:99; //浮动在最上层
}
-->
</style>
<div>欢迎光临脚本之家 www.jb51.net</div>

Tag:
上一篇:[css3]
下一篇:[CSS教程]
网友评论

<