Question

最近我遇到过这种用于将元素水平和垂直定位到中心的方法。但是，我无法弄清楚每个房产的作用。有人能够向我解释一下设置top:0, bottom:0, left:0, right:0会产生什么影响吗？

（如果您能够使用外行的术语解释它或提供说明性图像，那将会很棒。）

另外，将显示设置为表格的用途是什么？

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

<p class="absolute-center">What is this sorcery?</p>

Answer 1

您可以将css减少到：

＆＃13;

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

＆＃13;

<p class="absolute-center">What is this sorcery?</p>

＆＃13;

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

那么，这里的秘密/巫术是什么？

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

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

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

Answer 2

让我们稍微打破一下：

如果您有以下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/

因此，当我们将width（另外height）添加到之前的CSS时，该元素将限制为此大小。

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

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

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

Answer 3

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 4

检查一下...... 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绝对居中

4 个答案: