`
axl234
  • 浏览: 268838 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

绝对定位元素的居中实现

    博客分类:
  • css
 
阅读更多

 

如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了。

兼容性不错的主流用法是:

.element {
    width: 600px; height: 400px;
    position: aboslute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

但,这种方法有一个很明显的不足,就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时,往往要借助JS获得。

CSS3的兴起,使得有了更好的解决方法,就是使用transform代替margin. transformtranslate偏移的百分比值是相对于自身大小的,于是,我们可以:

.element {
    width: 600px; height: 400px;
    position: aboslute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

于是乎,无论绝对定位元素的尺寸是多少,其都是水平垂直居中显示的。

然,问题很明显,兼容性不好。IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的(手机web开发可忽略)。

实际上,绝对定位元素的居中实现还有另外一种方法,可以说是权衡了上面的尺寸自适应以及兼容性的一个方案,其实现的核心是margin:auto.

三、margin:auto实现绝对定位元素的居中

首先,我们来看下CSS代码:

.element {
    width: 600px; height: 400px;
    position: aboslute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

代码两个关键点:

  1. 上下左右均0位置定位;
  2. margin: auto

于是,就居中了。上面代码的width: 600px height: 400px仅是示意,你修改为其他尺寸,或者不设置尺寸(需要是图片这种自身包含尺寸的元素),都是居中显示的。很有意思的~~

 

对了,该方法IE8+以及其他浏览器都是OK的。

分享到:
评论

相关推荐

    CSS实现定位元素居中的方法

    绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了。 兼容性不错的主流用法是: CSS Code复制内容到剪贴板 .element { width: 600px; height: 400px; position:...

    CSS绝对定位元素left设为50%实现水平居中

    绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可。示例: [css] 复制代码代码如下: #board{ width:60%; padding:3%; background:#09F; position:absolute; top:0...

    DIV+CSS上下左右绝对居中

    对于不支持新布局模型的老浏览器,可以使用绝对定位来实现居中。这需要容器 `position: relative`,而子元素 `position: absolute`: ```css .container { position: relative; height: 100%; /* 容器需要高度...

    jquery实现让弹出层绝对居中

    对于弹出层的居中,我们通常选择使用绝对定位,因为它可以相对于最近的非静态定位的祖先元素进行定位。 接下来,我们需要获取浏览器窗口的宽度和高度,以及弹出层的宽度和高度。jQuery提供了`$(window).width()`和`...

    css 未知高度元素绝对居中

    在CSS布局设计中,使一个未知高度的元素居中对齐是一个常见的挑战。未知高度意味着元素的高度会在不同的内容或屏幕尺寸下变化,因此需要一种灵活且适应性强的解决方案。本篇将详细介绍如何实现这种居中效果,以及...

    使用bootstrap的H5页面登录框自适应水平居中、垂直居中

    3. 使用绝对定位:为登录框设置绝对定位,然后通过计算窗口的一半减去元素高度的一半来设置`top`属性,实现垂直居中。同时,设置`left: 50%`并应用`transform: translateX(-50%)`使其水平居中。 在描述中提到的...

    DIV绝对居中例子

    在网页设计中,让元素居中是一个常见的需求,特别是对于`div`这样的块级元素。在本示例中,我们探讨的是如何实现`div`的绝对居中,无论是水平还是垂直方向,即使`div`的高度是不确定的。下面将详细解释这个`DIV绝对...

    绝对定位元素的水平垂直居中的方法(3种任选)

    1.css实现居中 缺点:需要提前知道元素的宽度和高度。 <!doctype html> <html lang=en> <head> <meta charset=UTF-8> <title>Document</title> <style> .box{ width: ...

    CSS实现完美垂直居中 - 蓝色理想

    有时可以通过在元素内部添加一个绝对定位的伪元素,然后将它设置为与元素相同大小,并将其垂直居中,以此来间接实现元素的垂直居中。 8. **百分比`padding`**: 当元素的宽度固定且小于其父容器时,可以使用...

    DIV+CSS DIV居中布局

    `使元素相对于其最近的非静态定位祖先元素居中。例如: ```css .centered-div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 这种方法需要确保父元素有`position: ...

    css控制div中元素居中的示例.pdf

    另一种实现元素居中的方法是使用 text-align 属性,设为首页 将该属性值设置为 center 并应用到 body 元素上即可。这种做法是彻头彻尾的 hack,但它却能兼容大多数浏览器,所以在某些情况下也自然必不可少。 之所以...

    div+css垂直居中和水平居中

    5. **绝对定位元素的居中**: 当元素需要相对于其父元素居中时,可以使用绝对定位: ```css .container { position: relative; } .element { position: absolute; top: 50%; left: 50%; transform: ...

    绝对居中div

    `.centered-div`通过绝对定位和transform属性实现了居中。 需要注意的是,这种方法可能不适用于所有情况,特别是当需要在不同屏幕尺寸和设备上保持居中时。对于响应式设计,可能需要使用媒体查询(media queries)...

    前端css定位.pdf

    绝对定位元素经常与“子绝父相”的技术搭配使用,即子元素使用绝对定位,父元素使用相对定位,以此来精确控制子元素的位置。 固定定位与绝对定位类似,不同之处在于它是相对于浏览器窗口进行定位的。这意味着一旦...

    页面元素居中

    - **Position absolute/fixed**:通过设置绝对定位,结合`left`和`right`或`top`和`bottom`为`0`,并使用`margin: auto`,可以实现元素的居中。固定定位类似,但元素相对于视口定位。 2. 源码解析: 在给定的博文...

    js实现水平垂直居中

    这个函数首先将元素定位为绝对定位,然后计算出窗口的宽度和高度减去元素的宽度和高度的一半,分别设置为元素的`left`和`top`属性,从而达到居中效果。 二、自适应大小的元素居中 对于大小不确定或需要自适应的...

    CSS2.1如何让块元素垂直水平居中.rar

    在网页设计中,让元素在页面上垂直和水平居中是一项常见的需求...同时,随着CSS规范的不断发展,如Flexbox和Grid等新布局模型,使得元素居中变得更加简单和灵活。不过,对于CSS2.1环境下的需求,上述方法已经足够应对。

Global site tag (gtag.js) - Google Analytics