您的位置：首页 > Web前端 > CSS

纯CSS实现DIV垂直居中效果(所有浏览器有效)

2013-04-13 23:08 686 查看

最近修改公司一个用户登录页面,需要实现登录框在页面水平,垂直居中.因为才疏学浅,绞尽脑汁才想到利用绝对定位+百分比位置减去自身一半的长宽来实现垂直水平居中的,代码如下;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

<style type="text/css">
.test{
position:absolute;
width:200px;
height:200px;
background:#999;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-100px;
</style>
</head>

<body>

<div class="test"></div>
</body>
</html>

经测试google,IE8,IE6,火狐,360均有效(其他浏览器应该不用说了吧)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航