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

Question

我有几个关于位置的问题：绝对居中元素。我几乎查看了所有位置绝对的文章，但没有找到可以解释我现在询问的这种奇怪行为的内容。这是与问题相关的codepen（期待第三个问题）：https://codepen.io/anon/pen/LQrjzz

为什么 div 将 div 宽度单位从 px 更改为百分比（40px = 12.2%）时，为什么会向下跳转？如果我想使用百分比，我该如何解决这个问题？
为什么div在调整window大小时，即使还有space(https://i.imgur.com/4DPu9Vp.gifv)也会跳下来？我该如何解决这个问题？
为什么在这个片段中第二个 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 将 div 宽度单位从 px 更改为百分比（40px = 12.2%）时，我该如何解决这个问题，如果我想使用百分比?

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

为什么还有space，调整window的大小时，div会往下跳？我该如何解决这个问题？

默认情况下，left, right, bottom, top 设置为 auto。您的容器的宽度由其内容设置，但是 auto 在一侧属性意味着 "the value of right cannot be lower than 0." 因此，由于您的 left设置为50%和right为auto（默认），相当于设置max-width为50%：你的容器不能超过50%它相对父宽度。

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

要解决这个问题，您需要另一个包装器和不同的居中技巧，例如 inline-block content:

*, *: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 完全相同。同样，我们需要知道您的最终目标，以进一步帮助您实现此处的目标。

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

CSS: Few questions about position absolute

html

css

position

css-position

absolute

为什么 div 将 div 宽度单位从 px 更改为百分比（40px = 12.2%）时，我该如何解决这个问题，如果我想使用百分比?

为什么还有space，调整window的大小时，div会往下跳？我该如何解决这个问题？

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