我如何使用 min 和 max CSS 函数来处理 auto

Question

我希望能够使用常见的

margin: auto

属性，但具有最小边距，例如：

margin: 0 max(auto, 16px);

这将使元素水平居中，并且当视口太小时，仍然在两侧强制执行 16px 的边距。但没有工作

min()

和

max()

CSS 与

margin: auto;

例如： 我想在屏幕降低 500px 时设置样式

margin-left: 30px;

和

margin-right: 30px;

为

.navbar__menu

。 （不使用@media查询）

.navbar__menu {
  max-width: 500px;
  height: 50px;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  background: red;
  display: flex;
}

<div class="navbar__menu">

</div>

Answer 1

使用

margin-inline: max(30px,50% - 500px/2)

无需设置

max-width

.navbar__menu {
  height: 50px;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin-inline: max(30px,50% - 500px/2);
  background: red;
  display: flex;
}

<div class="navbar__menu">

</div>

更多详细信息请参阅我的博客：https://css-tip.com/center-max-width/

Answer 2

抱歉，如果我没有过多地检查代码，但对我来说，在

block

元素中，它足以将

padding-inline

设置为与

margin-left: auto

和

 结合的最小“边距” margin-right: auto

。好吧，最小值并不是真正的边距，但如果在元素中没有任何先前的填充，效果是相同的：它不会增加居中时两侧的空白空间。

我将其与

width: min-content

结合使用，并且在处理可能比可用屏幕空间更宽的内部表格时完美地工作，从而在较小的屏幕上允许最小的空白空间，并且不必担心固定的屏幕分辨率

max() 

、

min()

或其他 CSS 计算。

必须认识用户 Temani Afif，因为他在阅读他的答案后给了我解决方案的灵感。

Answer 3

只需使用

max-width

：
更新：我在Temani Afif的回答中看到不要使用最大宽度的建议，但我认为这是合适的。

.navbar__menu {
  --offset: 30px;
  width: 500px;
  max-width: calc(100% - var(--offset) * 2);
  height: 50px;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: red;
}

<div class="navbar__menu"></div>

---

附注1行解决方案：

.navbar__menu {
  width: min(500px, calc(100% - 30px * 2));
  height: 50px;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin:0 auto;
  background: red;
}

<div class="navbar__menu"></div>