声明： 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. Nginx 403 forbidden多种原因及故障模拟重现

    访问Nginx出现状态码为403 forbidden原因及故障模拟 1) nginx配置文件里不配置默认首页参数或者首页文件在站点目录下没有 1 index index.php index.html  ...

  2. Hive记录-配置支持事务管理hive-site.xml

    <property> <name>hive.support.concurrency</name> <value>true</value> & ...

  3. Java Calendar使用总结

    JavaCalendar 类时间操作,这也许是创建和管理日历最简单的一个方案,示范代码很简单. 演示了获取时间,日期时间的累加和累减,以及比较. 原文地址:blog.csdn.NET/joyous/a ...

  4. UESTC - 1168 凤神与狗

    原题链接 凤神隐居山林,与猫狗为伴.起初,他拥有cc只猫和dd只狗.每天下午他随机从中选择一只出去游玩并且晚上归来.如果他带的是狗,则第二天早上狗的数量增加ww只,否则,猫的数量增加ww只.由于凤神特 ...

  5. linux 进程 ctrl-c,ctrl-z,ctrl-d

    linux下: ctrl-c 发送 SIGINT 信号给前台进程组中的所有进程.常用于终止正在运行的程序. ctrl-z 发送 SIGTSTP 信号给前台进程组中的所有进程,常用于挂起一个进程. ct ...

  6. VMware虚拟机Mac OS X无法调整扩展硬盘大小的解决方案(转)

    使用VMware虚拟机搭建的MacOSX,在10.10以上可能会出现无法扩充磁盘大小的问题. 因为很多朋友在初次安装MacOSX的时候都默认选择40G的磁盘大小,结果用了没两天之后就发现磁盘不够用了. ...

  7. Tomcat环境变量,端口号,编码格式,项目路径,默认页的配置

    Tomcat的配置 1.配置环境变量 新建名为:CATALINA_HOME的系统变量,值为我们安装tomcat的目录 2端口号及编码的配置: 找到tomcat安装目录下的sonf下的server文件, ...

  8. luogu 4401 矿工配餐 多维dp

    五维dp,记忆化搜索会MLE超内存,所以用滚动数组,十分经典 五维dp #include <bits/stdc++.h> using namespace std; ; ][][][],la ...

  9. log4j2 的使用

    log4j2 是 log4j 的升级,更为方便,更为强大. log4j2.xml 的配置以及 log4j2的依赖包使用log4j2 并没有其他的依赖包,只是在使用log4j的情况下,需要别的进行桥接 ...

  10. http://blog.csdn.net/w_e_i_/article/details/70766035

    http://blog.csdn.net/w_e_i_/article/details/70766035