上海启嘟渡科技商贸有限公司
SEARCH

与我们合作

我们专注提供互联网一站式服务,助力企业品牌宣传多平台多途径导流量。
主营业务:网站建设、移动端微信小程序开发、营销推广、基础网络、品牌形象策划等

您也可通过下列途径与我们取得联系:

微 信: wxyunyingzhe

手 机: 15624122141

邮 箱:

怎样让网页中的div块在浏览器中上下居中呢

更新时间:2025-01-06 15:43:29

这是我以前回答过的一个问题,原理一样!

.middle{

width: 400px;

height:160px;

position: absolute;

margin-left: -200px;

margin-top: -80px;

top: 50%;

left: 50%;

display: block;

z-index: 2000;

border: 1px solid #006699;

}

原理是这样的:

因为这个块元素是绝对定位position: absolute。首先你要知道“绝对定位”的概念:它是以最近一个已经定位的祖先为基准进行定位,如果没有就以屏幕定位!

在这里(屏幕大小或祖先元素对于它来说就是100%);

top: 50%,就是在距屏幕上方或祖先元素50%,

left: 50%,就是在距屏幕左方或祖先元素50%,

因为它是以『左上角』为基准偏移的,它现在距离左边是:50%+400px,这个块的左上角在屏幕的中间,但是这个块元素不在屏幕中间,所以margin-left: -200px;把它想左边拉回一半,它就在屏幕中间了!

margin-top: -80px;和上面的原理一样。往上拉回去一半。。

多重随机标签

猜你喜欢文章

QQ客服 电话咨询