`
78425665
  • 浏览: 124833 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

绝对定位(position:absolute)水平居中兼容IE6,7,8,Chrome等

 
阅读更多
先将容器的设为绝对定位,之后将容器左边界设在页面的一半处(50%)开始,最后将容器的的做边距设为容器宽度一半的负值。
注意:绝对定位后,容器将独立于正常的文档流。
#container {
    width: 960px;
    position: absolute;
    left: 50%;
    margin-left: -480px;
}
分享到:
评论

相关推荐

    兼容ie,FF,chrome,opera的弹出层居中js

    标题“兼容ie,FF,chrome,opera的弹出层居中js”所指的就是一个JavaScript实现的弹出层(popup layer)定位代码,它能在Internet Explorer(IE)、Firefox(FF)、Chrome以及Opera这些主流浏览器中实现居中显示。...

    css实现div水平、垂直居中兼容chrome、ie8

    这段代码首先设置了`#div1`的宽度和高度,然后将其定位方式设置为绝对定位(`position: absolute`)。接着,使用`left: 50%`和`top: 50%`将元素的左上角移动到其父容器宽度和高度的50%位置。由于这样设置后,DIV的...

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

    在本篇内容中,介绍了如何使用纯CSS技术实现div元素在网页中的自适应居中布局,同时确保兼容性可以覆盖至较旧的浏览器版本,如IE7、Chrome和Firefox。此处的自适应居中,指div能够在其父容器内水平及垂直方向上都...

    谷歌浏览器 div 水平对齐

    "谷歌浏览器 div 水平对齐"的问题主要涉及到跨浏览器的兼容性,尤其是 Internet Explorer (IE) 和 Mozilla Firefox 与 Google Chrome 之间的差异。下面将详细讨论如何解决这个问题,并提供两种可行的解决方案。 ...

    chrome居中但ie不居中的解决方法

    标题“chrome居中但ie不居中的解决方法”和描述提到了一个具体问题,即在Chrome浏览器中元素能正常居中,但在IE中却无法居中。这个问题主要涉及到CSS样式和XHTML文档类型的声明。 首先,让我们来看看如何使用CSS使...

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

    上中下三行布局通常通过相对定位(relative)或绝对定位(absolute)来实现。我们可以为每个部分创建一个独立的DIV,并利用CSS的position属性进行布局。例如,顶部行可以设置为固定高度,底部行设置为固定在底部,而...

    ASP.NET 绝对居中弹出层

    此外,通过设置`position: absolute`和`margin: auto`,我们可以实现弹出层在父容器中的水平和垂直居中。 3. **ASP.NET Controls**:ASP.NET提供了一系列内置控件,如Panel或ModalPopupExtender,这些可以帮助我们...

    前端处理浏览器兼容问题

    **问题**:IE6不支持`min-height`和`min-width`属性,默认情况下`height`就是最小高度,`width`就是最小宽度。 **解决方法**:可以通过使用`!important`来覆盖IE6的默认行为。 ```css .container { min-height: ...

    浏览器兼容问题

    IE6-7会让文本及其嵌套的块元素居中,而FF、Opera、Safari以及IE8只会让文本居中,块元素则不会居中。 **解决方案**: 1. **使用 `margin` 自动分配**: ```css .center-block { margin-left: auto; margin-...

    弹出层居中问题版1

    3. 绝对定位:使用绝对定位可以将弹出层相对于其最近的非静态定位祖先元素进行定位。结合`position: absolute;`,`left: 50%;`,`top: 50%;`以及负的`transform`属性(如`transform: translate(-50%, -50%);`),...

    css的一些总结

    1. **绝对定位**:通过`position:absolute`可以使元素相对于最近的已定位祖先元素进行定位。 2. **相对定位**:`position:relative`使元素相对于其正常位置进行定位,通常用于微调元素的位置。 #### 布局与排版 1. ...

    css 跨浏览器实现float-center.docx

    4. 测试在主流浏览器如Chrome、Firefox、Safari、Edge和IE/Edge的旧版本中,确认兼容性。 此外,还提到了一些相关的CSS知识点,如`javascript css styleFloat`、`javascript css float 属性的特别写法`、`CSS 中...

    div垂直居中

    在传统的CSS布局中,实现div的垂直居中可能需要一些技巧,如使用`position: absolute`配合`top: 50%`和负的`margin-top`,或者使用`display: table-cell`和`vertical-align: middle`。然而,这些方法都有其局限性,...

    最全前端面试题-2(css篇-上百篇题集整理1个月)

    水平居中对行内元素可以使用`text-align: center`,对块级元素可以使用`margin: 0 auto`或`position: absolute`结合`left: 50%`和`transform: translateX(-50%)`。垂直居中则可以使用`line-height`等于`height`,`...

    前端面试题(包含答案)

    * IE6/IE7/IE8/IE9/IE10 都生效:`\0` * IE8/IE9/IE10 都生效,是 IE8/9/10 的 hack:`\9\0` * `!important` IE6 不识别 * `-webkit-` Chrome、Safari 私有属性 * `-moz-` Firefox 浏览器私有属性 * `-ms-` IE...

    天猫自定义区全屏代码

    - **兼容性考量**:测试主流浏览器如Chrome、Firefox、Safari等下的表现一致性。 ##### 5. 实际案例分析 假设我们需要在一个天猫店铺首页中实现一个全屏的轮播图效果,可以参考以下步骤: 1. **HTML结构搭建**: ...

    纯css三角提示框

    对于“chrome/FF/IE7”兼容性,这意味着这个CSS提示框的解决方案应该能在主流浏览器,包括Chrome、Firefox以及较旧版本的Internet Explorer(如IE7)中正常工作。这可能需要利用到一些浏览器特有前缀,如`-webkit-`...

    底部悬浮通栏可以关闭广告位的实现方法

    同时,背景颜色应设置为黑色,并根据需要调整透明度,如`opacity: .7`或使用IE兼容性写法`filter:alpha(opacity=70)`。 代码示例: ```css .footfixed { width: 100%; height: 140px; position: fixed; bottom:...

Global site tag (gtag.js) - Google Analytics