div层相对屏幕居中

最新推荐文章于 2022-11-04 16:29:54 发布
最新推荐文章于 2022-11-04 16:29:54 发布
阅读量1k 收藏 1
点赞数
文章标签： div 代码分析
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangqicong/article/details/6840807
版权

div层相对屏幕居中

没有研究过这个问题的朋友觉得很难,实际上原理很简单,主要记住以下3点就OK了。

1、先让这个DIV绝对定位.
2、让他距离上边50%,左边50%;这会这个DIV的左上角这个点就是窗口的正中间;
3、因为已经知道了这个DIV的高和宽了,那么再从这里点向左移动总宽及高的一半就可以了;

记住以上3个要点,来看个例子

以下是代码片段：
<div style="width:350px;height:300px;position:absolute;left:50%;top:50%;margin-top:-150px;margin-left:-175px;border:solid #000 5px;">
</div>

代码分析
符合第一点要求:position:absolute;
符合第二点要求:left:50%;top:50%;
符合第三点要求:margin-left:-175px [也就是-(350/2)] margin-top:-150px [也就是-(300/2)];

这样就很简单的使div在屏幕居中了.
yangqicong
关注
div块元素相对于窗口垂直居中
qq_27009517的博客
12-10 313
我们学习了CSS中的定位，那么现在我们来运用定位的知识来实现网页中常见的对联广告吧。 要求：无论页面怎么移动，页面左右的的广告栏不会发生位置的变化。 效果如下图所示： 任务 1、首先我们需要添加一个块元素，并且以慕课网为背景，模拟整个网页，并给块元素设置足够的宽高。 2、在网页中添加两个块元素，分别为对联广告中的左侧广告块和对联广告的右侧广告块 并且给对联块设置宽高 3、我们需要给对联左右块元素添加固定定位属性 4、使得对联左右块元素相对于窗口垂直居中...
css 相对浏览器动态居中永远保持在屏幕正中
12-01
使用如下css可以使div永远保持在屏幕正中 复制代码代码如下: <style type=”text/css”> .log { position:absolute; /*绝对定位*/ top:50%; /*距顶部50%*/ left:50%; margin:-100px 0 0 -150px; /*设定这个...
使用绝对定位+负外边距让DIV层水平垂直居中页面
12-02
让一个层水平垂直居中是一个非常常见的布局方式，但在html中水平居中使用margin:0px auto;可以实现，但垂直居中使用外边距是无法达到效果的。（页面设置height:100%;是无效的），这里使用绝对定位+负外边距的方式来实现垂直居中，但同时要考虑页面重置大小的情况，需要使用js来修正。 1、让层水平居中 复制代码代码如下: .className{ width:270px; height:150px; margin:0 auto; } 使用margin:0 auto;让层水平居中，留意宽度和高度必不可少。 2、让层垂直居中 复制代码代码如下: .className{ width
div相对屏幕居中
蕃薯耀
07-21 175
  div相对屏幕居中 &gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;&gt;
css div相对屏幕永远居中
weixin_30341735的博客
05-04 192
不管屏幕如何滑动，该div始终保持在屏幕正中央(支持IE7（包括IE7）以上版本) <div class="loginBox"></div> .loginBox { background: #FA2; width: 700px; height: 400px; position: fixed; lef...
整个DIV水平和垂直居中于屏幕
ithouse的专栏
10-20 3317
.vertical-center {position:absolute; width:100%; top:50%; margin-top:-150px; height:300px;} 原理是：相对于顶部位置50%；这样这个div的最顶端就处于垂直居中的中心线上；然后用margin-top：将div向上移动半个div的高度。就实现了垂直居中。 这个原理还适用于水平居中，记住margin的值=di
css div相对屏幕居中
weixin_39031283的博客
03-23 209
.Box { background: #FA2; width: 700px; height: 400px; position: fixed; left: 50%; top: 50%; z-index: 11; /*设定这个div的margin-top的负值为自身的高度的一半,margin-left的值也是自身的宽度的一半的负值.*/ ...
div在屏幕中如何实现居中效果
qq_45750154的博客
06-28 3054
本篇文章给大家介绍让div在屏幕中水平居中和垂直居中的方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 最近写网页经常需要将p在屏幕中居中显示，遂记录下几个常用的方法，都比较简单。 水平居中直接加上标签即可，或者设置margin:auto;当然也可以用下面的方法 下面说两种在屏幕正中（水平居中+垂直居中）的方法 放上示范的html代码： <body> <pclass="main"> <h1>MAIN</h1> &lt.
css中position:fixed实现div居中上下左右居中
09-25
此技术非常适用于创建居中的模态对话框、提示框和其他需要在屏幕上居中的元素。然而，它也可以被用于其他布局技巧中，例如创建全屏背景图像或动画等。 在实际应用中，只需将上述CSS类应用到任何希望居中的DIV元素上...
html+div相对屏幕居中
ZhuangLiang
12-01 3750
   第一点要求 :position:absolute     第二点要求 :left:50%;top:50%     第三点要求 :margin-left:-175px [ 也就是 -(350/2)] margin-top:-150px [ 也就是 -(300/2)]    第一点要求 :position:absolute     第二点要求
让DIV水平垂直居中的两种完美方法推荐
09-24
首先，通过HTML结构设置了一个包裹层（wrap）和两个子层（yuan），其中yuan类代表将要居中的DIV元素。通过CSS为这些元素设置了尺寸、背景和绝对定位，以确保它们能够在页面上正确显示。第一种方法通过类名为"first...
div 绝对屏幕居中
天下无双
01-07 1123
div 绝对屏幕居中  必须加 .div { width:300px; height:400px;         margin:-200px 0 0 -150px;      //  -200 == height/2                                                     //  -150 == wi
设置div层在屏幕的绝对居中
深海狂鲨
08-07 3469
 var myWidth = 0, myHeight = 0;if (typeof (window.innerWidth) == "number") {        myWidth = window.innerWidth;        myHeight = window.innerHeight;    } else {        if (document.documentElement &
CSS设置div标签屏幕居中
w5206666的博客
05-30 1151
CSS设置div标签屏幕居中 html标签 <div class="loading"> <div> <ui-spinner active v-if="flag"></ui-spinner> </div> </div> css样式 .loading { text-align: center; position: absolute; left: 50%; top:
html垂直居中 相对,Div相对页面垂直居中
weixin_30029951的博客
06-26 348
#left{ width:100px;height:50px; position:absolute; left:0px; background-color:#FF0000}#right{width:100px;height:50px; position:absolute; right:0px; background-color:#FF0000}...1.用JS获取当前浏览器视口的高度，计算后居中2...
怎样使层相对于屏幕居中显示
Cui55的专栏
07-06 1574
      登录                 BODY,TD,INPUT{font-size:9pt}     .window  {  BORDER-RIGHT:  #606060  2px  solid;  PADDING-RIGHT:  2px;  BORDER-TOP:  #f0f0f0  2px  solid;  PADDING-LEFT:  2px;  VISIBILITY:  ; 
css实现div于窗口居中
polmJ
01-15 4079
样式图： 首先页面覆盖整个窗口（无滚动条） html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } 居中css:(将罗列三种写法，原理相同，就是可以结合不同语句实现) 第一种： .content { position: ab
div居中方法3
qq_36836332的博客
08-12 170
​​​​​​利用绝对位置 百分比属性分配  然后往回拉 这里 父div使用相对位置 ， 子div使用绝对位置 ，是他的父元素的  50%   50% 的位置 开始 也就是 从 fu的 中心开始  布置 zi的时候是这样的； 然后把 zi开始往回拉,拉取的 距离是 zi的 宽高的一半 margin-top: -50px;margin-left: -50px; 这样就可以了   ...
让div居中的方式的几种方法
恒二哥的博客
11-04 7万+
可能讲述得不清楚，能看懂就好了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值