欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-05-02 09:34:01
...
这个示例是使用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,不会随滚动条滚动始终处于屏幕中间。
相关标签： html

上一篇： div 居中 html bootsrap

下一篇： 前妻要复婚有这些表现 说明她还爱着你

推荐阅读