HTML/CSS控制div垂直&&水平居中屏幕

最新推荐文章于 2024-10-04 06:11:34 发布

weixin_43040656

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量157

点赞数

文章标签： html

这个示例是使用HTML/CSS实现的，对于一个给定宽高的元素，不管有没拖动滚动条，让它始终处于屏幕水平方向和垂直方向居中的位置。 CSS: html,body{ height:100%; overflow:hidden;} body{ overflow:auto} .test{width:500px; height:500px; position:absolute; left:25%; top:25%; background-color:#000;} h1{ height:1500px;/*测试滚动条*/} HTML:

ph

示例分析：

对于绝对定位(position:absolute;)的元素，它的位置属性（top/left/bottom/right）的值，默认情况下是根据文档的根元素<html>进行偏移定位， 如果它的上层元素（祖先元素或父元素）的position值不等于static时，则top/left/bottom/right 根据该元素进行偏移定位。上面的示例中 .test 中top:25%; 表示.test的top值为根元素<html>高度的25%；

当html,body的高度为百分比时，<body>的高度根据父元素<html>来计算，<html>的高度根据可视窗口的高度度来计算，所以在上面的示例中 html,body{ height:100%; overflow:hidden;} 表示<html>、<body>的高度为整个内容可视窗口的高度，并且内容超出一屏时隐藏滚动条，而下面又使用了 body{ overflow:auto} 使得内容超出一屏幕时<body>的滚动条能够显示。所以当拖到滚动条时滚动是body的内容，而基于html进行绝对定位的.test,不会随滚动条滚动始终处于屏幕中间。