`
linhui_dragon
  • 浏览: 149511 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

如何实现一个DIV垂直居中

    博客分类：
  • CSS
 
阅读更多 

<!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=utf-8" />

<title>无标题文档</title>

<style type="text/css">

<!--

*{margin:0;padding:0;}

#divcss{width:834px; height:550px; border:1px solid #9f9f9f; <strong>position:absolute;left:50%;margin-left:-417px;top:50%;margin-top:-275px;</strong>}

-->

</style>

</head>

<body>

<div id="divcss">自动适应水平和垂直居中</div>

</body>

</html>



原理:先用left:50%;top:50%让这个div的左上角居于页面的正中,然后用margin-left:-417px;margin-top:-275px;使div向左向上移动它自身宽高的一半.
分享到：
| 一道基础例题的思考
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics