如何将边距或填充设置为父容器高度的百分比？

8 回答

• 1

  修复是的，垂直填充和边距是相对于宽度，但 top 和 bottom aren't.

  所以只需将div放在另一个内部，并在内部div中使用类似 top:50% 的东西（如果它仍然不起作用，请记住 position 很重要）

  回复于 2024-04-28T04:43:16+08:00
• 10

  以下是模拟所需行为的两个选项 . 不是一般解决方案，但在某些情况下可能有所帮助 . 这里的垂直间距是根据外部元素的大小而不是其父元素计算的，但是这个大小本身可以相对于父元素，这样间距也是相对的 .

  <div id="outer">
      <div id="inner">
          content
      </div>
  </div>
  

  第一种选择：使用伪元素，这里垂直和水平间距都相对于外部 . Demo

  #outer::before, #outer::after {
      display: block;
      content: "";
      height: 10%;
  }
  #inner {
      height: 80%;
      margin-left: 10%;
      margin-right: 10%;
  }
  

  将水平间距移动到外部元素使其相对于外部的父级 . Demo

  #outer {
      padding-left: 10%;
      padding-right: 10%;
  }
  

  第二种选择：使用绝对定位 . Demo

  #outer {
      position: relative;
  }
  #inner {
      position: absolute;
      left: 10%;
      right: 10%;
      top: 10%;
      bottom: 10%;
  }
  

  回复于 2024-04-28T04:43:16+08:00
• 0

  回答一个稍微不同的问题：您可以使用 vh 单位将元素填充到 viewport 的中心：

  .centerme {
      margin-top: 50vh;
      background: red;
  }
  
  <div class="centerme">middle</div>
  

  回复于 2024-04-28T04:43:16+08:00
• 201

  要使子元素绝对位于其父元素，您需要设置父元素的相对位置和子元素的绝对位置 .

  然后在子元素'top'上相对于父元素的高度 . 所以你还需要向孩子“翻译”50％的高度 .

  .base{
      background-color: green;
      width: 200px;
      height: 200px;
      overflow: auto;
      position: relative;
  }
      
  .vert-align {
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
  }
  

  <div class="base">
          <div class="vert-align">
              Content Here
          </div>
      </div>
  

  还有另一种使用柔性盒的解决方案 .

  .base{
      background-color:green;
      width: 200px;
      height: 200px;
      overflow: auto;
      display: flex;
      align-items: center;
  }
  

  <div class="base">
      <div class="vert-align">
          Content Here
      </div>
  </div>
  

  你会发现两者的优点/缺点 .

  回复于 2024-04-28T04:43:16+08:00
• 30

  将一行文本居中的其他方法是：

  .parent{
    position: relative;
  }
  
  .child{
     position: absolute;
     top: 50%;
     line-height: 0;
  }
  

  要不就

  .parent{
    overflow: hidden; /* if this ins't here the parent will adopt the 50% margin of the child */
  }
  
  .child{
     margin-top: 50%;
     line-height: 0;
  }
  

  回复于 2024-04-28T04:43:16+08:00
• 3

  50％的衬垫不会让您的孩子居中，它会将它放在中心下方 . 我认为你真的想要25％的填充率 . 也许你的内容越来越高，你的空间已经用完了？你也试过设置margin-top而不是padding-top？

  编辑：没关系，w3schools网站说

  ％以包含元素宽度的百分比指定填充

  也许它总是使用宽度？我从来没有注意到 .

  您正在做的事情可以使用display：table（至少对于现代浏览器）来实现 . The technique is explained here .

  回复于 2024-04-28T04:43:16+08:00
• 29

  这可以通过writing-mode属性来实现 . 如果将元素的 writing-mode 设置为垂直书写模式（例如 vertical-lr ），则其后代在两个维度中的填充和边距的百分比值将相对于高度而不是宽度 .

  来自spec：

  . . . 边距和填充属性的百分比（总是根据CSS2.1中的包含块宽度计算）是根据CSS3中包含块的内联大小计算的 .

  inline size的定义：

  内联尺寸中的测量：指水平书写模式下的物理宽度（水平尺寸），以及垂直书写模式下的物理高度（垂直尺寸） .

  示例，带有可调整大小的元素，其中水平边距相对于宽度，垂直边距相对于高度 .

  .resize {
    width: 400px;
    height: 200px;
    resize: both;
    overflow: hidden;
  }
  
  .outer {
    height: 100%;
    background-color: red;
  }
  
  .middle {
    writing-mode: vertical-lr;
    margin: 0 10%;
    width: 80%;
    height: 100%;
    background-color: yellow;
  }
  
  .inner {
    writing-mode: horizontal-tb;
    margin: 10% 0;
    width: 100%;
    height: 80%;
    background-color: blue;
  }
  

  <div class="resize">
    <div class="outer">
      <div class="middle">
        <div class="inner"></div>
      </div>
    </div>
  </div>
  

  在希望元素的宽高比保持不变但希望其大小与其高度而不是宽度相关的缩放的情况下，使用垂直书写模式尤其有用 .

  回复于 2024-04-28T04:43:16+08:00
• 1

  这是一个非常有趣的错误 . （在我看来，无论如何它都是一个bug）很好找！

  关于如何设置它，我会推荐Camilo Martin的答案 . 但至于为什么，我'd like to explain this a bit if you guys don't记 .

  ---

  在the CSS specs我发现：

  'padding'百分比：指包含块的宽度

  ......这很奇怪，但没关系 .

  所以，对于父 width: 210px 和一个子 padding-top: 50% ，我得到 padding-top: 96.5px 的计算/计算值 - 这不是预期的 105px .

  这是因为在Windows中（我不确定其他操作系统），常见滚动条的大小默认为 17px × 100% （或水平条形为 100% × 17px ） . 那些 17px 在计算 50% 之前被减去，因此 50% of 193px = 96.5px .

  回复于 2024-04-28T04:43:16+08:00