CSS绝对中心
最近我遇到了这种方法，用于定位元素水平和垂直的中心。 然而，我无法弄清楚每一个财产正在做什么。 有人能够向我解释什么是设置top:0, bottom:0, left:0, right:0的影响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>
你可以减less这个CSS：
.absolute-center { position:absolute; width: 500px; height: 100px; margin: auto; top: 0; bottom: 0; right: 0; left: 0; border: solid 1px red; }
<p class="absolute-center">What is this sorcery?</p>
让我们来分解一下：
如果您有以下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使元素居中的margin: auto 。
演示： http : //jsfiddle.net/0osLv27k/2/
您只需要添加顶部和左侧位置并添加变换。 如果你不需要固定的宽度，从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; }
<p class="absolute-center">asdsdada</p>
检查这个… 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; }
