绝对定位后，position:absolute;不能使用margin: 0 auto;实现居中；
声明： web小白的笔记，欢迎大神指点！联系QQ：1522025433.
我们都知道margin: 0 auto；可也实现块状元素的水平居中；但是对于绝对顶为的元素就会失效；
请看实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位后margin: 0 auto;居中失效的解决方法</title>
<style type="text/css">
.test-out { width: 500px;
height: 500px;
margin: 0 auto; /*实现父元素居中*/
background: red;
}
.test-in {
width: 200px;
height: 200px;
margin: 0 auto; /*实现子元素居中*/
background: blue;
} </style>
</head> <body>
<div class="test-out">
<div class="test-in"></div>
</div>
</body>
</html>
浏览器效果图：
我们可以看出在正常情况下： margin: 0 auto; 实现居中真是棒棒的！
我们把css样式修改为：
<style type="text/css">
.test-out {
position: relative; /*作为子元素的 定位包含框，使子元素在父元素内 进行定位*/
width: 500px;
height: 500px;
margin: 0 auto; /*实现父元素居中*/
background: red;
}
.test-in {
position: absolute; /*子元素实现绝对定位*/
width: 200px;
height: 200px;
margin: 0 auto;/* 此时会失效*/
background: blue;
}
浏览器效果：
子元素（蓝色盒子）的居中效果已失效！
绝对定位以后margin: 0 auto;实现居中失效的解决方法：
为了使子元素（蓝色盒子）在绝对定位下实现居中，我们可以利用定位和margin-left取相应的负值，实现居中；
具体代码如下：
<style type="text/css">
.test-out {
position: relative; /*作为子元素的 定位包含框，使子元素在父元素内 进行定位*/
width: 500px;
height: 500px;
margin: 0 auto; /*实现父元素居中*/
background: red;
}
.test-in {
position: absolute; /*子元素实现绝对定位*/
top:;
left: 50%; /*先定位到父元素（红盒）的中线，然后使子元素（红盒）的外边界 左偏移， 半个子元素（红盒） 的宽度，即可*/
margin-left: -100px;/*向左 偏移元素的总宽度的一半*/
width: 200px;
height: 200px;
background: blue;
}
</style>
浏览器效果图：
是不是达到我们想要的结果了（认真看代码中的注释）。
绝对定位后，position:absolute;不能使用margin: 0 auto;实现居中；的更多相关文章
- IE8 margin:0 auto 不能居中显示的问题
ie8下面margin:0 auto;不能居中的解决方案,ie8兼容性代码 今天写了个div,用margin:0 auto:来定义他的属性,让他居中,结果,竟然无效. 一开始以为是css里的代码冲突了 ...
- CSS样式margin:0 auto不居中
<style type="text/css">html,body{height:100%;width:960px;}.container{background-colo ...
- margin:0 auto;不居中
margin:0 auto:不居中可能有以下两个的原因; 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码 ...
- margin:0 auto;不能居中的原因
原因: 1.没有设置本身元素和父元素的宽度 2.本身元素使用了绝对定位和浮动 2.没声明DOCTYPE
- postion:fixed和margin:0 auto的使用
很多同学将顶部菜单固定,使用postion:fixed,然后使用margin:0 auto进行居中,发现margin:0 auto并不起作用. 通常,我们要让某元素居中,会这样做: #element{ ...
- margin:0 auto为何会居中?
margin: 0 auto;为何会居中呢??? 一开始的学习html的时候,就是只知道块级元素margin:0 auto就能居中 但是后来就很好奇 margin: auto 0;为何不能垂直居中? ...
- margin:0 auto;生效条件
1.position:absolute下不生效 原因:position:absolute只能相对于父元素进行定位top.left定位,相当于浮在父元素上面,所以margin:0 auto;就没有了参考 ...
- IE下margin:0 auto为什么不居中？
http://blog.sina.com.cn/s/blog_68c6be330101k7kn.html 我们经常用DIV+CSS布局网页的时候,正常情况下需要将div居中显示时,使用Css样式:ma ...
- margin:0 auto在IE中失效的解决方案
转自:http://www.cnblogs.com/hongchenok/archive/2012/11/29/2795041.html 最近在开发项目的时候,发现在火狐浏览器中设置外容器margin ...
随机推荐
- GTF文件
一.GTF文件格式 Fields must be tab-separated. Also, all but the final field in each feature line must cont ...
- keepalive的工作原理和如何做到健康检查
keepalived是以VRRP协议为实现基础的,VRRP全称Virtual Router Redundancy Protocol,即虚拟路由冗余协议. 虚拟路由冗余协议,可以认为是实现路由器高可用的 ...
- Hive记录-配置客户端可视化管理工具远程连接
配置客户端远程连接(方便可视化工具操作)-不需要在hive服务器上敲命令了 1.安装DBeaver工具:https://dbeaver.com/download/ 2.准备相关驱动文件(服务器上hiv ...
- HDU1098---数学
Ignatius's puzzle Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- 机器学习课程-第8周-降维(Dimensionality Reduction)—主成分分析(PCA)
1. 动机一:数据压缩 第二种类型的 无监督学习问题,称为 降维.有几个不同的的原因使你可能想要做降维.一是数据压缩,数据压缩不仅允许我们压缩数据,因而使用较少的计算机内存或磁盘空间,但它也让我们加快 ...
- Java基础其他
1. 二进制 进制就是进位制,常见的有二进制.十进制.十六进制等 在进制中,可用符号的数量称为基数,基数为n就称为n进制,逢n进一位: 二进制:0 1 十进制:0 1 2 3 4 5 6 7 8 9 ...
- 散列之HashTable学习
1,什么是散列? 举个例子,在日常生活中,你将日常用品都放在固定的位置,当你下次需要该东西时,直接去该地方取它.这个过程就相当于散列查找. 若将它们随意杂乱无章地存放,当需要某件东西时,只能一个地方一 ...
- linux系统--磁盘管理命令（二）
一.硬盘的分区模式 之前的硬盘分区模式为MBR 主分区不超过4个 单个分区容量最大为2TB 前面的分区模式就为MBR分区模式. 另一种分区模式为GPT 主分区个数限制:在GPT的分区表中最多可以支持1 ...
- apache - http
apahce 添加模块编译 httpd # so模块用来提供DSO支持的apache核心模块 # 如果编译中包含任何DSO模块,则mod_so会被自动包含进核心. # 如果希望核心能够装载DSO, ...
- Linux之常用命令【service】
补充说明 service命令 是Redhat Linux兼容的发行版中用来控制系统服务的实用工具,它以启动.停止.重新启动和关闭系统服务,还可以显示所有系统服务的当前状态. 语法 service(选项 ...