当您width在要应用的对象上指定时margin: 0 auto，该对象将位于其父容器的中央。

指定auto为第二个参数基本上会告诉浏览器自动确定左右边距本身，方法是将它们均等设置。它保证左右边距将设置为相同的大小。第一个参数0表示顶部和底部边距都将设置为0。

您不必指定父级宽度，而只需指定子对象的宽度。

我们都知道使用margin:auto可以让元素水平居中的。但你有没有想过使用margin:auto可以让元素水平居中的原因，要回答这个问题，我们首先需要看一下margin：auto的工作原理。auto如果它适用于垂直居中，那么又是一种什么情况，下面我们来看具体内容。

首先auto是做什么的？

定义auto元素，因元素类型和上下文而异。在边距中，auto可以表示两种情况：占用可用空间或0 px。这两个将为元素定义不同的布局。

这是我们利用auto最常见的用法。通过分配auto元素的左右边距，它们可以平等地占据元素容器中的可用水平空间 - 因此元素将居中。

但是，这只适用于水平边距，它不适用于浮动和内联元素，并且它本身也不能用于绝对和固定定位元素。

由于auto左右边距均匀地占据“可用”空间，当你auto只给出其中一个时，你认为会发生什么？

左边距或右边距auto将占据所有“可用”空间，使元素看起来像是向右或向左偏移。

如前所述，auto在浮动，内联和绝对元素中不起作用。所有这些元素已经决定了它们的布局，所以没有auto用于边距并期望它像这样集中。

这将破坏使用类似float的最初目的。因此设置这些元素的auto值为0px。

auto如果它没有宽度，也不会对典型的块元素起作用。到目前为止我向你展示的所有例子都有宽度。

值的宽度auto将具有0px边距。块元素的宽度通常覆盖其整个容器，它是auto或100%，因此margin:auto将被设置为0px。

auto设置垂直会是怎样的呢？

auto在顶部和底部边距中总是计算为0px（绝对元素除外）。W3C规范说它是这样的：

到目前为止，为什么这没有说。这可能是因为典型的垂直页面流，页面大小在高度方面增加。因此，相对于页面本身而言，将元素垂直居中于其容器中不会使其显示为居中，这与水平完成（在大多数情况下）不同。

也许是因为同样的原因，他们决定为绝对元素添加一个例外，它可以在整个页面的高度垂直居中。

这也可能是由于边缘坍塌效应（相邻元素“边缘”的崩溃），这是垂直边距的另一个例外。

然而，后者似乎是一个不太可能的情况 - 因为不会折叠其边距的元素 - 如Floats和overflow其他元素visible，仍然为其分配0px垂直边距auto。

由于绝对定位元素恰好存在异常，我们将使用auto值垂直和水平居中。但在此之前，我们需要找出margin:auto实际工作的时间，就像我们希望它在绝对定位的元素中一样。

这是另一个W3C规范的用武之地：

“如果三者中没有一个是”自动“：如果”margin-left“和”margin-right“都是”auto“，则在额外约束条件下解决方程式，即两个边距得到相等的值”

这几乎说，对水平auto的利润率，抓住间隔相等，则对值left，width并且right不应该auto，他们的默认值。因此，我们所要做的就是在绝对定位的元素中赋予它们一些价值。left并且right应该具有相同的值以实现完美的居中。

该规范还提到了垂直边距类似的东西。

“如果”top“，”height“和”bottom“中的所有三个都是auto，则将”top“设置为静态位置...”

“如果三者中没有一个是”自动“：如果”margin-top“和”margin-bottom“都是”auto“，则在额外约束下解决方程式，即两个边距得到相等的值......”

因此，对于一个绝对元件被垂直居中，其top，height和bottom值不应该auto。

现在结合所有这些，这是我们将得到的：

如果您想要将页面上的元素向右或向左偏移而没有包含它的其他元素（就像浮点数一样），请记住有auto用于边距的选项。

将元素转换为绝对定位只是为了使它可以垂直居中可能不是一个好主意。还有其他选项，如flexbox和CSS变换，更适合那些。

1. Delphi中Spcomm使用属性及用法详解 Delphi是一种具有 功能强大.简便易用和代码执行速度快等优点的可视化快速应用开发工具,它在构架企业信息系统方面发挥着越来越重要的作用,许多程序员愿意选 ...

2. @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

3. 前言 对Static.final.Static final这几个关键词熟悉又陌生?想说却又不知怎么准确说出口?好的,本篇博客文章将简短概要出他们之间的各自的使用,希望各位要是被你的面试官问到了,也能从 ...

4. 第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下     at-rule ...

5. CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

6. SVN组成中trunk,branches and tags功能用法详解  我相信初学开发在SVN作为版本管理时,都估计没可能考虑到如何灵活的运用SVN来管理开发代码的版本,下面我就摘录一篇文章来简单说 ...

1. Mysql数据恢复主要针对Windows游戏引擎服务器意外宕机,以及游戏出现重大BUG,导致需要回档. 注意:请在恢复数据库之前,备份目标数据库,切记! 一.Windows服务器意外DOWN机,数据库 ...

2. VS的调试模式改为Debug 工具—选项—调试—常规中的‘要求源文件和原始版本完全匹配’的勾去掉

3. php连接mysql数据库很容易,他俩真是黄金搭档.最近转战java连接微软sqlServer,步骤稍微复杂一点,但也不是太难,中途遇到了一点小问题,最后在csdn论坛里找到了答案http://bbs ...

4. 1 概述 对于电商企业而言,每年都会有几次大的促销活动,像双十一.店庆等,对于第一次参加这个活动的新手,难免会有些没有头绪,因而将自己参加双十一.双十二活动中的过程心得进行下总结,一方面供以后工作中继 ...

5. 以前在入门的时候,找的入门书籍上编写的 demo 都是基于 Storyboards 拖界面的.后来接触公司项目,发现界面都是用纯代码去写复杂的 autoLayout 的.再然后,领导给我发了个 Mas ...

6. 在做winform程序发布时遇到了这个问题,在我的机子上是可以正常运行的,但到别人的机子上就出现了这个错误.为此问题头疼了一上午终于搞定! 遇到这个问题一定是配置环境的原因, 1.你可以在程序  发布 ...

7. 大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

8. 默认情况下,进程是在前台运行的,这时就把shell给占据了,我们无法进行其它操作.对于那些没有交互的进程,很多时候,我们希望将其在后台启动,可以在启动参数的时候加一个'&'实现这个目的. ti ...