CSS 绝对居中答案

【问题标题】：CSS absolute centeringCSS 绝对居中
【发布时间】：2015-09-27 11:38:50
【问题描述】：

最近我遇到了这种用于将元素水平和垂直定位到中心的方法。但是，我无法弄清楚每个属性在做什么。有人可以向我解释设置top:0, bottom:0, left:0, right:0 有什么影响吗？

（如果您能够使用外行术语来解释它或提供说明性图像，那就太好了。）

另外，设置显示为table有什么用？

.absolute-center {
  position: absolute;
  display: table;
  height: auto;
  width: 500px;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  border: solid 1px red;
}

&lt;p class="absolute-center"&gt;What is this sorcery?&lt;/p&gt;

【问题讨论】：

与 joel 的回答一致，display:table 被使用，因为它允许 p 标签的高度为 auto 并扩展到其中的内容。如果您使用任何其他显示类型，它将使用 top:0; 和 bottom:0; 将其扩展到容器的整个高度
commitstrip.com/en/2015/05/21/learning-the-hard-way 还有howtocenterincss.com
我回滚了，因为我注意到编辑被那些太容易接受的审阅者批准了。一个 sn-p 作为标题还不错，而且肯定比语法错误的问题要好。

标签： html css css-position

【解决方案1】：

您只需要添加顶部和左侧位置并添加变换。如果您不需要固定宽度，从 css 中删除 width 也没有问题，如果您想要在 p 中居中文本添加填充，否则删除它。试试这个：

.absolute-center {
    position:absolute;
    width: 500px;
    padding:50px 0;
    top: 50%;
    left: 50%;
    border: solid 1px red;
    text-align:center;
    transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
  display:inline-block;
  vertical-align:middle;
}

&lt;p class="absolute-center"&gt;asdsdada&lt;/p&gt;

【讨论】：

【解决方案2】：

检查这个... HTML 是

<p class="absolute-center"></p>

CSS 是

.absolute-center {
    margin: auto;
    background: red; 
    width: 100px;
    height: 100px;
    position:absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

【讨论】：

这如何回答关于为什么提供的 CSS 有效的原始问题？

【解决方案3】：

您可以将 css 简化为：

.absolute-center {
    position:absolute;
    width: 500px;
    height: 100px;
    margin: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    border: solid 1px red;
}

&lt;p class="absolute-center"&gt;What is this sorcery?&lt;/p&gt;

具有bottom: 0; top: 0; left: 0; right: 0; 等属性的absolute 元素将填满所有空间。

那么，这里的秘密/魔法是什么？

您正在定义元素的宽度和高度。所以，即使他想填满所有的空间，他也会受到你的宽度和高度的限制。

秘密是margin: auto，为什么？因为元素将用边距填充剩余的间距。这样，因为您定义了宽度和高度，它将具有该大小，但边距将以 auto 的工作方式填充容器/父级的其余部分，两边大小相等。

由于margin:auto，您需要定义宽度和高度。

【讨论】：

非常感谢您的精彩回答！

【解决方案4】：

让我们稍微打破一下：

如果您有以下 CSS（我将其应用于您当前的标记）：

.absolute-center {
    position:absolute;
    height: auto;
    margin: auto;
    background: red;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

您可以看到div.absolute-center 填充了整个父元素（在本例中为body），只需设置所有属性top、bottom、right 和left。

演示：http://jsfiddle.net/0osLv27k/

所以当我们在之前的 CSS 中添加width（另外加上height）时，元素被限制在这个大小。

演示： http://jsfiddle.net/0osLv27k/1/

最后是神奇的margin: auto，它使元素居中。

演示：http://jsfiddle.net/0osLv27k/2/

【讨论】：