小tip: margin:auto实现绝对定位元素的水平垂直居中
转载自: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
代替margin
. transform
中translate
偏移的百分比值是相对于自身大小的,于是,我们可以:
.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; /* 有了这个就自动居中了 */
}
代码两个关键点:
- 上下左右均
0
位置定位; 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
的填充规则和普通流体元素一模一样:
- 如果一侧定值,一侧
auto
,auto
为剩余空间大小; - 如果两侧均是
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实现绝对定位元素的水平垂直居中的更多相关文章
- 使用CSS定位元素实现水平垂直居中效果
总结一下平时使用CSS技巧使元素达到水平居中效果 相对定位(或绝对定位)实现水平垂直居中: element{ position:relative; /*这个属性也可以是absolute*/ width ...
- CSS子元素在父元素中水平垂直居中的几种方法
1. 水平居中(margin: auto;)子父元素宽度固定,子元素上设置 margin: auto; 子元素不能设置浮动,否则居中失效. #div1{ width: 300px; height: 3 ...
- css如何让子元素在父元素中水平垂直居中
方法一: display:flex <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 如何实现固定宽高的DOM元素的水平垂直居中
效果:
- css 绝对定位实现水平垂直居中
负margin实现水平垂直居中 width: 500px; height: 500px; position: absolute; left: 50%; top :50%; margin-left: - ...
- css进阶 04-如何让一个元素水平垂直居中?
04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...
- 绝对定位元素left、right、top、bottom值与其margin和宽高的关系
绝对定位元素(position: absolute)在其相对定位元素(即文档流中最近的非静态定位祖先元素)中,定位祖先元素的宽度为W,垂直高度为H,则存在以下关系: 元素水平方向 width + le ...
- css绝对定位元素实现居中的几个方法
一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #boar ...
- day2-设置position:fixed/absolute无法使用margin:auto调整居中
问题描述:父元素给定宽度,子元素给定宽度,设置子元素position为absolute/fixed后,无法使用margin:auto使子元素在父元素中水平居中 html代码如下: <div cl ...
随机推荐
- 安装DotNetCore.1.0.0-VS2015Tools.Preview2一直失败,如何解?
首先要说明的一点是,本地的VS2015的环境已经安装完成,而且vs2015.3也已经更新完成了,这个环境应该是没啥问题.但是安装.DotNetCore.1.0.0-VS2015Tools.Previe ...
- 了解Redis过期策略及实现原理
我们在使用redis时,一般会设置一个过期时间,当然也有不设置过期时间的,也就是永久不过期. 当我们设置了过期时间,redis是如何判断是否过期,以及根据什么策略来进行删除的. redis设置过期时间 ...
- 在MyEclipse中使用javadocAPI文档
开始啦 1.打开MyEclipse,选中要导出的项目,右击Exprot弹出窗口,选择java----javadoc点击next到下一界面. 2.选出要导出的项目或要添加的项目,在browse中选择路径 ...
- SpringMVC之JSON交互
#什么是json? json是一种用于储存数据格式,是js脚本语言的子集. #json的作用? 它可以传递对象.数组等数据结构.如果是单个数据,则要用数组,不用对象,因为对象都是键值对的 方式去存储, ...
- python基础:re模块匹配时贪婪和非贪婪模式
python贪婪和非贪婪 正则表达式通常用于在文本中查找匹配的字符串.Python里数量词默认是贪婪的(在少数语言里也可能是默认非贪婪),总是尝试匹配尽可能多的字符:非贪婪则相反,总是尝试匹配尽可能少 ...
- android 颜色值参考,(有颜色图
) 2011-10-13 19:55:30| 分类: android | 标签:android颜色值|字号大中小 订阅 Android 常用RGB值以及中英文名称 颜 色 RGB值 英文名 中文名 ...
- Linux 系统下安装 python-skimage
Linux 系统下安装 python-skimage 安装必须的依赖 // python-mumpy // python-scipy // python-matplotlib $ sudo apt-g ...
- docker 容器配置tocmat时间不统一
1.在tomcat配置文件bin下 vim setenv.sh #!/bin/bashCATALINA_OPTS='-Duser.timezone=Asia/Shanghai'export CAT ...
- 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 ' ...
- xlrd与xlwt的下载
读excel表格: xlrd 地址:https://pypi.org/project/xlrd/ 下载语句:pip install xlrd 写excel表格: xlwt https://pypi.o ...