`
f543711700
  • 浏览: 328322 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

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+css垂直居中和水平居中

    在网页设计中,实现元素的垂直居中和水平居中是一项常见的需求,这涉及到...学习和熟练掌握这些方法对于提高网页布局能力至关重要,特别是在响应式设计中,灵活运用居中策略能帮助创建美观且适应不同屏幕尺寸的界面。

    绝对居中div

    在网页设计中,"绝对居中div层"是一种常见的布局技术,用于使一个div元素在容器内保持垂直和水平居中的状态。这种技术对于创建响应式设计、弹出框、对话框或者任何需要在页面中心展示的内容至关重要。下面将详细阐述...

    不错的弹出层居中效果锁定屏幕

    在网页设计中,"不错的弹出层居中效果锁定屏幕" 是一个常见的需求,尤其是在创建模态框、对话框或提示信息时。这个标题描述了一个简单而实用的解决方案,允许弹出层(通常是div元素)在页面中央显示,并且能够固定在...

    css中position:fixed实现div居中上下左右居中

    此技术非常适用于创建居中的模态对话框、提示框和其他需要在屏幕上居中的元素。然而,它也可以被用于其他布局技巧中,例如创建全屏背景图像或动画等。 在实际应用中,只需将上述CSS类应用到任何希望居中的DIV元素上...

    使用绝对定位+负外边距让DIV层水平垂直居中页面

    这里我们将详细探讨如何利用绝对定位和负外边距来实现一个DIV层在页面中的水平垂直居中,并考虑窗口大小变化时的动态调整。 首先,我们要明白CSS的定位机制。在CSS中,定位主要有静态定位、相对定位、绝对定位和...

    垂直居中显示ie7+

    在网页设计中,"垂直居中显示"是一个常见的需求,特别是在多设备、多屏幕尺寸的环境下,确保元素在页面上无论何时都能保持居中状态,能够提供良好的用户体验。本话题主要探讨如何在IE7及以上的浏览器中实现元素的...

    CSS网页布局DIV水平居中的各种方法

    这种方法的优点在于它可以在不知道元素确切宽度的情况下实现居中,并且能够适应不同屏幕尺寸下的布局需求。 ### 总结 通过上述两种方法,我们可以有效地实现`div`容器的水平居中。对于静态布局或者宽度固定的元素...

    css 相对浏览器动态居中永远保持在屏幕正中

    使用如下css可以使div永远保持在屏幕正中 复制代码代码如下: &lt;style type=”text/css”&gt; .log { position:absolute; /*绝对定位*/ top:50%; /*距顶部50%*/ left:50%; margin:-100px 0 0 -150px; /*设定这个...

    CSS 图片水平垂直居中于DIV

    在网页设计中,将图片水平垂直居中于一个DIV元素是常见的需求,这涉及到CSS布局技术的运用。本文将深入探讨如何实现这个效果,并提供相关的源码示例。 首先,我们要明白CSS中的定位机制,包括静态定位、相对定位、...

    让DIV水平垂直居中的两种完美方法推荐

    首先,通过HTML结构设置了一个包裹层(wrap)和两个子层(yuan),其中yuan类代表将要居中的DIV元素。通过CSS为这些元素设置了尺寸、背景和绝对定位,以确保它们能够在页面上正确显示。第一种方法通过类名为"first...

    鼠标移动到div上显示制定信息或者div(自适应显示位置)

    这个功能实现了对不同屏幕尺寸的自适应,因为坐标计算是基于元素的相对位置,而不是固定的像素值。因此,无论屏幕大小如何变化,信息div总能正确显示。 通过以上步骤,我们已经成功创建了一个简单的鼠标悬停提示...

    全屏css+DIV页面上中下三行布局,兼容各浏览器中间居中显示

    本文将深入探讨如何使用CSS+DIV来创建一个全屏页面上中下三行布局,并确保在各种浏览器中都能实现中间内容的居中显示。 首先,我们需要理解CSS的盒模型和定位概念。盒模型包括内容区域(content)、内边距(padding...

    图片水平垂直居中

    在网页设计中,让图片水平垂直居中是一个常见的需求,特别是在构建响应式布局或需要保持元素在不同屏幕尺寸下居中的场景。本文将详细介绍如何使用简洁的代码来实现这一目标,适用于各种现代浏览器。 首先,我们可以...

    jQuery点击按钮弹出遮罩层并固定居中特效源码.zip

    为了居中,我们可以动态计算遮罩层的宽度和高度的一半,然后将其设置为相对浏览器窗口的负边距。 ```javascript $('#open-mask').click(function() { $('#mask').fadeIn('slow', function() { var maskWidth = $...

    完全纯css实现div自适应居中兼容IE7 Chrome FireFox

    为了使div同时在水平和垂直方向上居中,需要将div放置在一个相对定位的容器中,然后对该容器应用`position: fixed;`或`position: absolute;`,并结合`top`, `left`, `right`, `bottom`和`margin`属性进行调整。 3. ...

    div完美自适应动态上下左右居中

    本文将详细介绍如何利用CSS属性实现一个能够完美自适应屏幕大小变化、动态上下左右居中的`&lt;div&gt;`元素。 #### 一、概念理解 在开始之前,我们需要了解几个关键概念: - **自适应**:即页面元素能够根据不同的设备...

    CSS.DIV实列

    3. **响应式设计**:利用媒体查询(Media Queries),可以让`div`随着屏幕尺寸变化而改变布局。这在移动优先的设计策略中非常重要。 ```css @media (max-width: 768px) { .container { width: 100%; } } ```...

    jquery弹出层鼠标点击弹出层可浮动在屏幕滚动

    标题中的“jquery弹出层鼠标点击弹出层可浮动在屏幕滚动”指的是使用jQuery实现的弹出层功能,当用户点击文字或图片时,弹出层会出现在屏幕中央,并且能随着浏览器窗口的滚动而保持相对位置,始终在用户的视线范围内...

    DIV+CSS相对IE6、IE7和IE8的兼容问题

    标题和描述均提到了“DIV+CSS相对IE6、IE7和IE8的兼容问题”,这揭示了在Web开发中,尤其是针对老旧浏览器如IE6、IE7和IE8进行CSS布局时,开发者可能遇到的一系列挑战。这些浏览器在解析CSS规则时存在独特的行为,...

    漂亮的div弹窗

    6. **定位技术**:通过绝对定位或相对定位,我们可以让弹窗在屏幕的任意位置显示,或者使其始终居中。 7. **响应式设计**:为了适应不同设备和屏幕尺寸,弹窗的设计应该具有响应性,确保在手机、平板和桌面电脑上都...

Global site tag (gtag.js) - Google Analytics