转载自:http://www.zhangxinxu.com/wordpress/?p=3794

一、绝对定位元素的居中实现

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

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

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

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

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

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

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

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

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

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

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

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

代码两个关键点:

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

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

您可以狠狠地点击这里:margin:auto与绝对定位元素的垂直居中demo

点击demo页面中间的按钮,让原本static的框框absolute化,可以发现其是水平垂直居中的。

不知诸位新技能get否?

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

上图为8~10月份,百度流量统计员给出的浏览器访问数据。IE6+IE7大概14%的样子。显然,很快,此方法就要开始称霸PC武林了!

三、原因

当一个绝对定位元素,其对立定位方向属性同时有具体定位数值的时候,流体特性就发生了,例如:

<div class="box"></div>
.box {
position: absolute;
left: 0; right: 0;
}

如果只有left属性或者只有right属性,则由于包裹性此时.box宽度是0。但是,在本例中,因为left/right同时存在,因此宽度就不是0,而是自适应于.box包含块的padding box宽度,也就是随着包含块padding box的宽度变化,.box的宽度也会跟着一起变。

具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样:

  1. 如果一侧定值,一侧autoauto为剩余空间大小;
  2. 如果两侧均是auto, 则平分剩余空间;

例如,下面的CSS代码:

.father {
width: 300px; height:150px;
position: relative;
}
.son {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}

此时.son这个元素的尺寸表现为“格式化宽度和格式化高度”,和<div>的“正常流宽度”一样,同属于外部尺寸,也就是尺寸自动填充父级元素的可用尺寸的,然后,此时我们给.son设置尺寸,例如:

.son {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
width: 200px; height: 100px;
}

此时宽高被限制,原本应该填充的空间就被多余了出来,这多余的空间就是margin:auto计算的空间,因此,如果这时候,我们再设置一个margin:auto,那么:

.son {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
width: 200px; height: 100px;
margin: auto;
}

我们这个.son元素就水平和垂直方向同时居中了。因为,auto正好把上下左右剩余空间全部等分了,自然就居中啦!

小tip: margin:auto实现绝对定位元素的水平垂直居中的更多相关文章

  1. 使用CSS定位元素实现水平垂直居中效果

    总结一下平时使用CSS技巧使元素达到水平居中效果 相对定位(或绝对定位)实现水平垂直居中: element{ position:relative; /*这个属性也可以是absolute*/ width ...

  2. CSS子元素在父元素中水平垂直居中的几种方法

    1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...

  3. css如何让子元素在父元素中水平垂直居中

    方法一: display:flex <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  4. 如何实现固定宽高的DOM元素的水平垂直居中

    效果:

  5. css 绝对定位实现水平垂直居中

    负margin实现水平垂直居中 width: 500px; height: 500px; position: absolute; left: 50%; top :50%; margin-left: - ...

  6. css进阶 04-如何让一个元素水平垂直居中?

    04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...

  7. 绝对定位元素left、right、top、bottom值与其margin和宽高的关系

    绝对定位元素(position: absolute)在其相对定位元素(即文档流中最近的非静态定位祖先元素)中,定位祖先元素的宽度为W,垂直高度为H,则存在以下关系: 元素水平方向 width + le ...

  8. css绝对定位元素实现居中的几个方法

    一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #boar ...

  9. day2-设置position:fixed/absolute无法使用margin:auto调整居中

    问题描述:父元素给定宽度,子元素给定宽度,设置子元素position为absolute/fixed后,无法使用margin:auto使子元素在父元素中水平居中 html代码如下: <div cl ...

随机推荐

  1. 安装DotNetCore.1.0.0-VS2015Tools.Preview2一直失败,如何解?

    首先要说明的一点是,本地的VS2015的环境已经安装完成,而且vs2015.3也已经更新完成了,这个环境应该是没啥问题.但是安装.DotNetCore.1.0.0-VS2015Tools.Previe ...

  2. 了解Redis过期策略及实现原理

    我们在使用redis时,一般会设置一个过期时间,当然也有不设置过期时间的,也就是永久不过期. 当我们设置了过期时间,redis是如何判断是否过期,以及根据什么策略来进行删除的. redis设置过期时间 ...

  3. 在MyEclipse中使用javadocAPI文档

    开始啦 1.打开MyEclipse,选中要导出的项目,右击Exprot弹出窗口,选择java----javadoc点击next到下一界面. 2.选出要导出的项目或要添加的项目,在browse中选择路径 ...

  4. SpringMVC之JSON交互

    #什么是json? json是一种用于储存数据格式,是js脚本语言的子集. #json的作用? 它可以传递对象.数组等数据结构.如果是单个数据,则要用数组,不用对象,因为对象都是键值对的 方式去存储, ...

  5. python基础:re模块匹配时贪婪和非贪婪模式

    python贪婪和非贪婪 正则表达式通常用于在文本中查找匹配的字符串.Python里数量词默认是贪婪的(在少数语言里也可能是默认非贪婪),总是尝试匹配尽可能多的字符:非贪婪则相反,总是尝试匹配尽可能少 ...

  6. android 颜色值参考,(有颜色图

    ) 2011-10-13 19:55:30| 分类: android | 标签:android颜色值|字号大中小 订阅 Android 常用RGB值以及中英文名称   颜 色 RGB值 英文名 中文名 ...

  7. Linux 系统下安装 python-skimage

    Linux 系统下安装 python-skimage 安装必须的依赖 // python-mumpy // python-scipy // python-matplotlib $ sudo apt-g ...

  8. docker 容器配置tocmat时间不统一

    1.在tomcat配置文件bin下 vim   setenv.sh #!/bin/bashCATALINA_OPTS='-Duser.timezone=Asia/Shanghai'export CAT ...

  9. ERROR 3009 (HY000): Column count of mysql.user is wrong. Expected 45, found 42. Created with MySQL 50560, now running 50725. Please use mysql_upgrade to fix this error.

    centos7.5 登入mysql,进行授权报错 问题: mysql> grant all privileges on *.* to 'lvhanzhi'@'%' identified by ' ...

  10. xlrd与xlwt的下载

    读excel表格: xlrd 地址:https://pypi.org/project/xlrd/ 下载语句:pip install xlrd 写excel表格: xlwt https://pypi.o ...