CSS-宽高均为百分比的DIV,怎么做到水平垂直居中

服务器管理 服务器管理 主题:1035 回复:2217

CSS-宽高均为百分比的DIV,怎么做到水平垂直居中

虐人心 发布于 2017-10-10 字数 221 浏览 1229 回复 1

如何实现?兼容各浏览器

浏览器全屏时

浏览器缩放时

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(1

归属感 2017-10-21 1 楼

恩,先分析一下,垂直居中用 position:absolute;left:50%; 然后再设置 margin-left 值为自身的一半。水平居中亦是如此。
这个时候宽度和高度为百分比,所以margin-left不是一个固定的值,但是可以用另一种方法解决。需要嵌套两个div,内层div再用margin-left:-50%;并且position:relative;
如下所示。

<!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>
</head>
<body style="height:100%;background:#DDEEBE;">
<div style="width:50%;height:50%;position:fixed;top:50%;left:50%;">
   <div style="width:100%;height:100%;position:relative;left:-50%;top:-50%;background:#CF865D;">
      垂直水平居中,兼容ie6.0及以上版本,firfox3.6及以上版本,Opera,chrome,Safari,360浏览器,遨游浏览器,搜狗浏览器等等。
   </div>
</div>
</body>
</html>