CSS这样为什么不能居中？？

Question

position: absolute;display: block;width: 80%;margin:0 auto;

为什么改成这样就可以了？第一种为什么不行？

position: absolute;display: block;width: 80%;margin:auto;right:0;left:0;

Answer 1

第一种不行，因为你设置了

position: absolute;

但top,bottom，left,right都没有指定，则left，top值与原文档流位置一致。即跟当它static时的位置一样，但是不占位。这个时候

margin: 0 auto;

这行代码其实的不起作用的。

第二种可以，因为你指定了left和right为0，把元素充满了容器，同时自身指定了宽度，总宽度计算方式：

left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = 包含块宽度

margin-left 以及 margin-right 值为 auto 的设为0，所以总宽度（固定） = width（固定） + margin-left + margin-right;（宽度为80%），到这一步，你就可以把

position: absolute;
left: 0;
right: 0;

这代码无视了，它的作用其实可以理解为确定其元素的总宽度，

margin: 0 auto;

当margin设置为auto的时候，左右边距会平分，元素自然就居中了，垂直居中原理一致。

Answer 2

绝对定位的元素设置margin 0auto是无效，你给了宽度，那么直接left 10%

Answer 3

传送门

Answer 4

绝对定位元素居中是需要设置宽高的。。而且使用absolute后会带有BFC特性，display会自动变为block，你第二句也多余..

Answer 5

问题应该出在position: absolute;绝对定位后，margin:0 auto就不起作用了