声明： 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 ...