是否有办法使垂直填充/边距与自动水平边距相同？

Question

我希望将元素设置为以水平为中心，并使用

margin-left: auto;
margin-right: auto;

现在，我希望我的垂直偏移量与水平偏移量相同，只是它在某一点上将其设置为100 to。

我目前的解决方案是使用calc和min并将其添加到填充中：

div {
    --max-width: 80ch;
    max-width: var(--max-width);
    /* short hand for margin-[left|right] */
    margin-inline: auto;
    /* short hand for padding-[bottom|top] */
    padding-block: min(100px, calc((100% - var(--max-width)) / 2));
}

这是有效的，并取得了我想要的结果。这也是，我有相同的水平和垂直偏移，直到一个点(100 up )。此时，水平偏移量仍然随着页面宽度的增长而增长，但垂直偏移量的上限为100 is。

但我想知道是否有更简单的解决方案。

​

​

​

​

Answer 1

我认为你想要的效果和

margin: auto;

因为您希望将内容集中在div中。

如果这是你真正想要达到的目标，有几种方法可以做到。我用的是挠曲。

只有3行代码：

display:flex;
justify-content:center;
align-items:center;

Answer 2

没有看到您的完整标记和如何使用您的CSS，您所拥有的似乎已经足够您解释您正在努力实现的目标。

但是，请注意，您的计算可能会产生一个负值，但这并不重要，因为您在padding-block属性上使用了它--因此，负填充值将被忽略。在margin-block属性上可能会出现问题。尽管如此，我还是会添加一个max(value, 0)，以确保它将0作为最小padding-block值。此外，在除法运算符之前缺少一个结束括号。

​

div {
    --width: 100px;
    --max-vertical-offset: 100px;
    background-color: yellow;
    width: var(--width);
    margin-inline: auto;
    padding-block: min(var(--max-vertical-offset), max((100vh - var(--width)) / 2, 0px));
}

<div class="my-div">
  test
</div>

​

Answer 3

试试这个：

​

body {
  margin: 0;
}
div {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="my-div">
  test
</div>

​