Question

我有问题。我必须严格将div垂直放置在正确的位置。但是我无法设置％，如果我设置px，则在不同的屏幕尺寸上看起来非常糟糕。

所以

.parent {
  display: block;
  max-height: 100% !important;
  position: absolute;
  top: 0px;
  margin-right: 0;
  margin-left: 0;
  bottom: auto;
  left: auto;
  right: 15px;
}

.child_button {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

<div class="parent">
  <div>
    <div class="child_button">Text
    </div>
  </div>
</div>

因此子按钮不会达到高度的50％，只有当我将顶部设置为px而不是将其设置为％时，子按钮才会移动

我做错了什么？

谢谢

Answer 1

您应该设置身体高度，并且您的父母也应该具有height属性。此外，父级和子级之间的div元素应为高度100％

body {
  height: 100vh;
}
.parent {
    display: block;
    max-height: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    margin-right: 0;
    margin-left: 0;
    bottom: auto; 
    left: auto; 
    right: 15px;

  }
  
  .parent > div {
    height: 100%;
  }

.child_button {
position: relative; 
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}

<div class="parent">
  <div>
      <div class="child_button">Text
      </div>
  </div>
</div>

Answer 2

html,
body {
  margin: 0;
  height: 100%;
}

.parent {
  display: block;
  height: 100%;
  background-color: red;
  position: relative;
}

.child_button {
  padding: 10px; 
  display: inline-block;
  background-color: white;
  position: absolute;
  top: calc(50% - 19px);
}

<div class="parent">
  <div>
    <div class="child_button">Text
    </div>
  </div>
</div>

您可以根据按钮的高度调整calc值。

Answer 3

好吧，您正在根据自己的身高向孩子div转换/给予保证金，这就是为什么它不起作用的原因。

最现代的解决方案可能是使用flexbox和

align-items: center;

但是Observer的解决方案可以正常工作并且适合您的代码。

无法将div定位为高度为50％的CSS

3 个答案: