CSS：关于绝对位置的几个问题

Question

我有一些关于位置的问题：绝对中心元素。我几乎看到每个位置绝对的文章，但没有找到能解释我这个我现在要问的奇怪行为的东西。这是与问题相关的codepen（期待第三个问题）：https://codepen.io/anon/pen/LQrjzz

1. 当div宽度单位从px更改为百分比（40px = 12.2％）时，为什么div会跳转？如果我想使用百分比，我如何解决这个问题？
2. 为什么在调整窗口大小时，即使有空间（https://i.imgur.com/4DPu9Vp.gifv），div也会跳转？我该如何解决这个问题？
3. 为什么在这个片段中第二个div的高度= 0？我预计它的高度为50px宽度。

main{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#first{
  width: 100px;
  height: 100px;
  background: black;
}

#second{
  width: 50%;
  height: 50%;
  background: aqua;
}

<main>
  <div id="first"></div>
  <div id="second"></div>
</main>

//来自codepen的代码

HTML：

<main>
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor</p>
  <div></div>
</main>

CSS：

main{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px red solid;
  padding: 10px;
}

h1{
  font-size: 32px;
  width: 10em;
  border: 2px black dotted;
}

p{
  font-size: 32px;
  width: 10em;
  border: 2px green dotted;
  display: inline-block;
  vertical-align: middle;
}

div{
  display: inline-block;
  width: 40px; /*  12.2%  */
  height: 40px;
  background: lawngreen;
  vertical-align: middle;
  border: 2px blue dotted;
}

我希望这些问题不是愚蠢的。非常感谢你。

Answer 1

当div宽度单位从px更改为百分比（40px = 12.2％）时，为什么div会跳转？如果我想使用百分比，我该如何解决？

您的div位于没有定义宽度的容器中。由于div本身可以更改容器的宽度，因此CSS无法将宽度设置为百分比。解决这个问题取决于你的实际目标......

为什么在调整窗口大小时，即使有空间，div也会跳转？我该如何解决这个问题？

默认情况下，left, right, bottom, top设置为auto。容器的宽度由其内容设置，但辅助属性上的auto表示“right的值不能低于0。”所以，由于您的left设置为50%而right设置为auto（默认），因此相当于将max-width设置为50%：您的容器不能超过相对父宽度的50％。

这里有一个GIF，可以帮助您了解正在发生的事情：

要解决此问题，您需要另一个包装器和一个不同的居中技巧，例如inline-block内容：

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

*{
  margin: 0;
}

html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/**
 new element
 */
.center{
  position: absolute;
  top: 50%;
  left: 0;
  width : 100%;
  font-size : 0;
  text-align:center;
  transform: translateY(-50%);
}

/**
 center with inline block
 */
main{
  display:inline-block;
  font-size : 1rem;
  border: 2px red solid;
  padding: 10px;
}

h1{
  font-size: 32px;
  width: 10em;
  border: 2px black dotted;
}

p{
  font-size: 32px;
  width: 10em;
  border: 2px green dotted;
  display: inline-block;
  vertical-align: middle;
}

.block{
  display: inline-block;
  width: 40px; /*  12.2%  */
  height: 40px;
  background: lawngreen;
  vertical-align: middle;
  border: 2px blue dotted;
}

<div class="center">
  <main>
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor</p>
    <div class="block"></div>
  </main>
</div>

为什么在这个片段中第二个div的高度= 0？我预计它的高度为50px宽度。

这与问题＃1完全相同。同样，我们需要知道您的最终目标，以进一步帮助您实现您想要的目标。