Css 居中奇怪的行为

Question

我正在尝试将表单居中放置在屏幕上。我正在使用 absolute 元素，将 left 和 top 设置为 50%，并通过 css transform 将其移回中心。到目前为止一切顺利，但是当我将左侧增加到 90% 时，表单元素就会消失。我希望他们只是移动到视口(viewport)之外。

.center {
  padding: 30px;
  position: absolute;
  top: 50%;
  left: 90%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

这是我没有的效果understand

如果有人能解释为什么这些元素会相互重叠？即使它们在绝对元素中。 为了增加更多的奇怪性，如果“左”值是负数，元素只是从侧视口(viewport)出来？ 这个我知道

white-space:nowrap; 

会成功，但为什么？

提前致谢

Answer 1

正如评论中所指出的，此行为与 inline-block 级别元素有关，但它也与您的 position: absolute; 规则有关，关于你的具体情况。

正如您在 demo 中看到的那样 当 inline-block 级元素开始到达视口(viewport)的外部边界时，将 wrap 或 collapse；这与 display 属性的性质有关。

有几种方法可以解决这个问题:

• 正如您提到的 white-space: nowrap 是一个
• 正如 Gaby 在他的评论中提到的那样，给元素一个 width 值也会纠正这个问题 - DEMO
• 将您的position 更改为relative 也将解决此问题- DEMO

您遇到此问题的真正原因是因为您的 .center 元素 有 display: block，正在失去它的继承 width: 100% 因为它有 position: absolute; 或者换句话说，失去它作为 block 级别元素的地位.