不定宽高元素水平垂直居中

position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; 或者 position: absolute; top: 50%; left:50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform:translate(-50%,-50%);

我能想到的只有2种。 1：flex弹性盒子 justify-content align-items 设置为center 2：transform

求第一种原理。 为何需要将四个方向都设置为0？ 【 在 RyanV 的大作中提到: 】 : [code=css] : position: absolute; : left: 0; : ...................

【 在 dcy0701 的大作中提到: 】 : 求第一种原理。 : 为何需要将四个方向都设置为0？ 没有定位值的absolute元素实际上是个没有实际宽度的浮动元素。（收缩了边界） 然后设置了四个方向以后拓展了bounding box。我是这么理解的..不知道准确么 这里有详细的解释恩。 http://codepen.io/shshaw/details/gEiDt

完全不懂你在讲什么 没有定位值得absolute元素实际上是一个没有实际宽度的浮动元素。。。。 不应该相当于static吗 收缩了边界。 也就是形成了一个块级上下文盒子？ margin auto怎么实现 上下margin也能自适应的吗？ 【 在 RyanV 的大作中提到: 】 : : 没有定位值的absolute元素实际上是个没有实际宽度的浮动元素。（收缩了边界） : 然后设置了四个方向以后拓展了bounding box。我是这么理解的..不知道准确么 : ...................

【 在 dcy0701 的大作中提到: 】 : 完全不懂你在讲什么 : : 没有定位值得absolute元素实际上是一个没有实际宽度的浮动元素。。。。 : ................... 没有定位值的absolute元素实际上是一个没有实际宽度的浮动元素，脱离了文本流，怎么是static呢。 后面的原因那个参考标准https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height For absolutely positioned elements, the used values of the vertical dimensions must satisfy this constraint: 'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below. If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.

transform 我认同,但是四个方向都设为0, 应该是只适用于定高宽的元素吧 【 在 RyanV 的大作中提到: 】 : [code=css] : position: absolute; : left: 0; : ...................

测试过是可以的。 【 在 AlstonLYG 的大作中提到: 】 : transform 我认同,但是四个方向都设为0, 应该是只适用于定高宽的元素吧

谢谢指点。 没有定位值得absolute元素是一个没有实际宽度的浮动元素并不严谨（并不等价）。 虽然说很相似。。 absolute形成了BFC，收缩了宽度。 并且没有高度。。当然float也可以形成BFC 这叫做 absolute和float的收缩性。 在收缩性上，两者基本是一致的。 还有就是。体现在父级元素高度塌陷的区别。 如果父级是float元素，那么absolute不会撑起float宽度。但是float会。 所以 就前一个问题来讲，并不等价，而是在文档流中，相当于static元素。。仅仅在此元素的定位上，相当于static元素。 后半个问题。。 只是觉得这标准有点扯。。没有任何原理就告诉你我该怎样怎样。。 【 在 RyanV 的大作中提到: 】 : : 没有定位值的absolute元素实际上是一个没有实际宽度的浮动元素，脱离了文本流，怎么是static呢。 : 后面的原因那个参考标准https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height : ...................