html5中文学习网

您的位置: 首页 > 网页制作 > css教程 » 正文

根据已知高和宽绝对垂直居中div示例代码_Div+CSS教程_CSS_网页制作

[ ] 已经帮助:人解决问题
点评:正如标题所言根据已知高和宽绝对垂直居中div,下面有个不错的示例,大家可以参考下

复制代码
代码如下:
DRPHTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> DRPHTML5中文学习网 - HTML5先行者学习网
<html xmlns="http://www.w3.org/1999/xhtml"> DRPHTML5中文学习网 - HTML5先行者学习网
<head> DRPHTML5中文学习网 - HTML5先行者学习网
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> DRPHTML5中文学习网 - HTML5先行者学习网
<title>已知宽高度DIV垂直水平居</title> DRPHTML5中文学习网 - HTML5先行者学习网
<style type="text/css"> DRPHTML5中文学习网 - HTML5先行者学习网
<!-- DRPHTML5中文学习网 - HTML5先行者学习网
.main{ position:absolute; top:50%; left:50%; width:821px; height:392px; margin:-196px 0 0 -410.5px; background:#C8EDFB} DRPHTML5中文学习网 - HTML5先行者学习网
--> DRPHTML5中文学习网 - HTML5先行者学习网
</style> DRPHTML5中文学习网 - HTML5先行者学习网
</head> DRPHTML5中文学习网 - HTML5先行者学习网
<body> DRPHTML5中文学习网 - HTML5先行者学习网
<div class="main">已知宽高度DIV垂直水平居</div> DRPHTML5中文学习网 - HTML5先行者学习网
</div> DRPHTML5中文学习网 - HTML5先行者学习网
</body> DRPHTML5中文学习网 - HTML5先行者学习网
</html> DRPHTML5中文学习网 - HTML5先行者学习网
DRPHTML5中文学习网 - HTML5先行者学习网
说明: DRPHTML5中文学习网 - HTML5先行者学习网
width:821px; height:392px DRPHTML5中文学习网 - HTML5先行者学习网
margin的取值为高和宽的一半
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助