声明: 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;实现居中;的更多相关文章

  1. IE8 margin:0 auto 不能居中显示的问题

    ie8下面margin:0 auto;不能居中的解决方案,ie8兼容性代码 今天写了个div,用margin:0 auto:来定义他的属性,让他居中,结果,竟然无效. 一开始以为是css里的代码冲突了 ...

  2. CSS样式margin:0 auto不居中

    <style type="text/css">html,body{height:100%;width:960px;}.container{background-colo ...

  3. margin:0 auto;不居中

    margin:0 auto:不居中可能有以下两个的原因; 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码 ...

  4. margin:0 auto;不能居中的原因

    原因: 1.没有设置本身元素和父元素的宽度 2.本身元素使用了绝对定位和浮动 2.没声明DOCTYPE

  5. postion:fixed和margin:0 auto的使用

    很多同学将顶部菜单固定,使用postion:fixed,然后使用margin:0 auto进行居中,发现margin:0 auto并不起作用. 通常,我们要让某元素居中,会这样做: #element{ ...

  6. margin:0 auto为何会居中?

    margin: 0 auto;为何会居中呢??? 一开始的学习html的时候,就是只知道块级元素margin:0 auto就能居中 但是后来就很好奇 margin: auto 0;为何不能垂直居中? ...

  7. margin:0 auto;生效条件

    1.position:absolute下不生效 原因:position:absolute只能相对于父元素进行定位top.left定位,相当于浮在父元素上面,所以margin:0 auto;就没有了参考 ...

  8. IE下margin:0 auto为什么不居中?

    http://blog.sina.com.cn/s/blog_68c6be330101k7kn.html 我们经常用DIV+CSS布局网页的时候,正常情况下需要将div居中显示时,使用Css样式:ma ...

  9. margin:0 auto在IE中失效的解决方案

    转自:http://www.cnblogs.com/hongchenok/archive/2012/11/29/2795041.html 最近在开发项目的时候,发现在火狐浏览器中设置外容器margin ...

随机推荐

  1. java包的所有类生成class

    javac的编译单位其实就是单个的java文件,为了达到同时编译多个java文件的目的,可以将所需编译的java文件路径保存在一个txt中,比如sourcelist.txt,以换行为分隔符(这个过程称 ...

  2. HTML格式化标签

    除了div.p.h1~h6.a.span这几个极常用的标签外,HTML还有一些不常见的标签(10个,5对:加粗.斜体.大小.上下标.特殊),默认效果如下: 当然,我们习惯用css编写效果来替代这些效果 ...

  3. Python基础【day01】:初始模块(五)

    本节内容 1.标准库 1.sys 2.os 2.第三方库 1.for mac 2.for linux Python的强大之处在于他有非常丰富和强大的标准库和第三方库,几乎你想实现的任何功能都有相应的P ...

  4. POJ - 3267 The Cow Lexicon(动态规划)

    https://vjudge.net/problem/POJ-3267 题意 给一个长度为L的字符串,以及有W个单词的词典.问最少需要从主串中删除几个字母,使其可以由词典的单词组成. 分析 状态设置很 ...

  5. centos7 cannot find a valid baseurl for repo

    出现这个问题是因为yum在安装包的过程中,虽然已经联网,但是没法解析远程包管理库对应的域名,所以我们只需要在网络配置中添加上DNS对应的ip地址即可. 操作 1.打开网络配置文件 vi /etc/sy ...

  6. C# ffmpeg工具将视频转为SWF格式

    1.下载ffmpeg工具 using System; using System.Collections; using System.Configuration; using System.Data; ...

  7. JavaScript之this,call,apply

    this:被调用的上下文对象: apply与call:切换被调用的上下文对象,即 调用时,this被临时性地切换 //demo 1 [call] function forEach(list,callb ...

  8. luogu P4082 [USACO17DEC]Push a Box

    传送门 一个人推箱子,和之前的华容道中的棋子移动有异曲同工之妙,因为每次可以让人走到箱子的其他方向上,或者推一下箱子 所以状态可以设成\(f_{i,j,k}\),即箱子在\((i,j)\),人在\(k ...

  9. 第3月第1天 GCDAsyncSocket dispatch_source_set_event_handler runloop

    + (void)startCFStreamThreadIfNeeded { LogTrace(); static dispatch_once_t predicate; dispatch_once(&a ...

  10. Dubbo多版本

    当服务提供者提供的服务接口出现不兼容升级时,可以设置版本号,使用多个版本号(version)进行过渡. 1).服务提供者配置文件 <dubbo:service ref="userSer ...