老规矩，先来一段废话，我大学刚入门的时候觉得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. monkey 基本用法

    monkey测试步骤: 一.使用模拟机 1.安装好虚拟机,比如说天天模拟机.夜神模拟机.雷神模拟机 2.将需要测试的APK装在虚拟机上 3.cmd>adb shell 连接模拟机 4.输入命令m ...

  2. [水题日常]UVA1625 Color Length

    来整理一下思路- 一句话题意:给两个大写字母的序列,每次取出其中一个数列的第一个元素放到新序列里面,对每个字母\(c\)记它的跨度\(L(c)\)为这个字母最后出现的位置-第一次出现的位置,求新序列所 ...

  3. matplotlib的学习12-Subplot 多合一显示

    import matplotlib.pyplot as plt # matplotlib 是可以组合许多的小图, 放在一张大图里面显示的. 使用到的方法叫作 subplot. plt.figure() ...

  4. [.NET] - 基础知识 - .NET Overview

    .NET Framework是有一个Framework Class Libray(FCL)和一个Common Language Runtim环境构成的,它 提供一个一致的面向对象的编程环境,而无论对象 ...

  5. NAT、端口映射、内网穿透、公网IP都是啥

    原文地址:https://wuter.cn/1756.html/ 一.IPv4地址 IP协议是为计算机网络相互连接进行通信而设计的协议,它是能使连接到网上的所有计算机网络实现相互通信的一套规则. 这里 ...

  6. 手摸手带你用Hexo撸博客(一)

    原文地址 手摸手带你用Hexo撸博客(一) 环境搭建 安装 node 狂点下一步 命令行输入此条命令 如果能看到版本号则安装成功 node -v 安装Git (同上) 实在不会的小伙伴百度一下,教程很 ...

  7. java io 源码研究记录（一）

    Java IO 源码研究: 一.输入流 1  基类 InputStream 简介: 这是Java中所有输入流的基类,它是一个抽象类,下面我们简单来了解一下它的基本方法和抽象方法. 基本方法: publ ...

  8. [leetcode]516. Longest Palindromic Subsequence最大回文子序列

    Given a string s, find the longest palindromic subsequence's length in s. You may assume that the ma ...

  9. 【kinetic】操作系统探索总结（八）键盘控制

    如果尝试过前面的例子,有没有感觉每次让机器人移动还要在终端里输入指令,这也太麻烦了,有没有办法通过键盘来控制机器人的移动呢?答案室当然的了.我研究了其他几个机器人键盘控制的代码,还是有所收获的,最后移 ...

  10. JVM的艺术-对象创建与内存分配机制深度剖析

    JVM的艺术-对象创建与内存分配机制深度剖析 引言 本章将介绍jvm的对象创建与内存分配.彻底带你了解jvm的创建过程以及内存分配的原理和区域,以及包含的内容. 对象的创建 类加载的过程 固定的类加载 ...