老规矩，先来一段废话，我大学刚入门的时候觉得CSS很简单，记一记就会了，不就是盒模型嘛，现在想来觉得自己那时候真的很自以为是哈哈。但是随着工作沉淀，我明白了任何技术都有着它的深度和广度，正是因为不少人对CSS都抱有轻视的态度，不说精通，能把CSS学到位的人都少之又少。当然我这么说并不代表我的CSS如何了得，事实上，我也是个切图仔，对CSS知之甚少。

回归正题：

元素居中的方法有很多比如display：flex、绝对定位结合transform: translate(-50%, -50%)等等，但我觉得最神奇的还是：

<body>

    <div class="content"></div>

</body>
        .content {

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            width: 100px;

            height: 100px;

            margin: auto;

            background: green;

        }

之前我只知道这样也能居中，但是不知道为什么。甚至还觉得主要是因为上下左右都为0的原因。

原因：

其实主要是因为：margin: auto;

auto的意思其实就是：平分剩余空间

（你看这个盒子模型它又长又宽，啊，串台了）

根据这个盒子模型我们可以看出，上下的margin都是一样的，左右也一样，也就是上、下平分、左、右平分。

那如果我们把上下左右的值设置都设置为100px并且把margin：auto; 去掉呢？

那它就以top、left的值来定位了，即使我把right、bottom写在了前面。也就是当left、top、right、bottom都有值时，优先以左上角来定位。

这时可见剩余空间并没有被平分。

在上右下左值不为0时加上margin: auto;也一样居中了。可见，auto属性确实在平分剩余空间。

顺便再提一句，给父元素设置z-index:9999； 子元素仍然排在父元素上面，那是为什么呢？层叠上下文跟z-index的关系是如何的？以后有机会再说吧

绝对定位上下左右都为0 margin为auto为什么能居中的更多相关文章

  1. position:absolute和margin：auto 连用实现元素水平垂直居中

    有时候,要实现一些元素水平垂直都居中,这部分元素呢 可能大小未知,例如一些图片或者是一些未知大小的块元素. 利用绝对定位可以将要居中的元素脱离文档流. position: absolute; left ...

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

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

  3. IE下margin:0 auto为什么不居中？

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

  4. 在ie浏览器，360浏览器下，margin：0 auto；不居中的原因

    转自 http://blog.sina.com.cn/s/blog_6eef6bf60100nn4m.html margin:0 auto:不居中可能有以下两个的原因 没有设置宽度 看看上面的代码,根 ...

  5. 图片margin:0 auto;为何不居中

    图片margin:0 auto;为何不居中 关键: img元素 display设为block 代码: <!DOCTYPE html> <html> <head> & ...

  6. CSS中margin：auto什么意思？margin：auto属性的用法详解

    我们都知道使用margin:auto可以让元素水平居中的.但你有没有想过使用margin:auto可以让元素水平居中的原因,要回答这个问题,我们首先需要看一下margin:auto的工作原理.auto ...

  7. IE下div使用margin:0px auto不居中的原因

    IE下div使用margin:0px auto不居中的原因 一般在将div居中显示时,使用css: divX {margin:0 auto;} 此css在firefox下是好的,但是在ie下不起作用, ...

  8. IE6和IE7下绝对定位position：absolute和margin的冲突问题解决

    绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" st ...

  9. 转载：IE下div使用margin:0px auto不居中的原因

    转自:http://www.blogjava.net/sealyu/archive/2010/01/08/308640.html 一般在将div居中显示时,使用css: divX {margin:0  ...

随机推荐

  1. UML—20—003

    博客班级 https://edu.cnblogs.com/campus/fzzcxy/2018SE1 作业要求 https://edu.cnblogs.com/campus/fzzcxy/2018SE ...

  2. MySQL全面瓦解14：事务

    关于事务 我们在数据库中需要执行一个系列的操作的时候,要保证这个系列执行的连续性和完整性,要么整个系列的执行都成功,要么就全部失败(只要有一个步骤失败,其他均回滚到之前的状态), 保证不会存在一部分成 ...

  3. vue第一单元(初识webpack-webpack的功能-webpack的初步使用)

    第一单元(初识webpack-webpack的功能-webpack的初步使用) #课程目标 了解webpack出现的意义,以及webpack解决的前端问题 掌握webpack的使用流程和步骤 掌握we ...

  4. Java进阶：基于TCP通信的网络实时聊天室

    目录 开门见山 一.数据结构Map 二.保证线程安全 三.群聊核心方法 四.聊天室具体设计 0.用户登录服务器 1.查看当前上线用户 2.群聊 3.私信 4.退出当前聊天状态 5.离线 6.查看帮助 ...

  5. Python基础编程——数据类型

    本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理 在程序设计和编程中,会涉及到各种各样的数据类型,而不同的数据类型变量之间可以进行的运算是不同的.在p ...

  6. Winform 去掉 最大化 最小化 关闭按钮（不是关闭按钮变灰）终极解决办法

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  7. 【整理】互联网服务端技术体系：高性能之并发（Java）

    分而合之,并行不悖. 综述入口见:"互联网应用服务端的常用技术思想与机制纲要" 引子 并发,就是在同一时间段内有多个任务同时进行着.这些任务或者互不影响互不干扰,或者共同协作来完成 ...

  8. JDBC UPDATE误区

    1 package com.lykion; 2 3 import java.sql.Connection; 4 import java.sql.PreparedStatement; 5 import ...

  9. 【linux】系统编程-5-线程

    目录 前言 7. 线程 7.1 概念 7.2 创建线程 7.2.1 pthread_create() 7.3 设置线程属性 7.3.1 pthread_attr_init() 7.3.2 销毁一个线程 ...

  10. eclipse中把spring源码关联至当前工程

    1.下载并导入spring的相关jar包下载对应版本的spring 2.在当前工程中,选择Referenced Libraries,展开后,选择相应的jar包,右击并选择Properties 3. 在 ...