强制div具有均匀的宽度和高度？答案

【问题标题】：Force div to have an even width and height?强制div具有均匀的宽度和高度？
【发布时间】：2020-12-31 01:05:39
【问题描述】：

当我使用transform: translate(-50%,-50%); 将绝对定位的 div 在我的屏幕上居中时，文本模糊。

我尝试了 tons 种不同的解决方案（mostly from here 和 here），除了使 div 的宽度和高度为偶数之外，没有任何效果。

也就是说，如果高度是 77 像素而不是 76 像素，则内部文本是模糊的。同样，如果 div 宽度是 163 像素而不是 162 像素，那么它是模糊的。

有没有办法保证动态div的宽高是偶数？

使用 JavaScript 似乎是不行的，因为它不仅复杂，而且会导致元素在渲染后立即闪烁到不同的宽度（需要先渲染才能找到宽度），这对用户查看。

另外，我不能只硬编码宽度和高度，因为内容是动态的。另外，如果我可以将宽度硬编码为 100 像素，那么我什至不需要这个问题，因为我可以做类似 transform: translate(calc(-50% - 50px),-50%); 的事情来回避这个问题。

这是一个代码示例：

.outer {
  margin: 0 auto;
  width: 500px;
  border: 1px solid #ddd;
  height: 50px;
  position: relative;
}

.inner {
  position: absolute;
  left: 50%;
  top: 25px;
  transform: translate(-50%, -50%);
  background-color: #dfdfdf;
  padding: 5px;
  font-family: Inter;
}

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

<div class="outer">
  <div class="inner">
    <b> asdf </b> blurrya
  </div>
</div>

【问题讨论】：

您是否考虑过另一种方法来使您的 div 居中？试过 flexbox 吗？
它绝对定位在屏幕上，所以我不能使用 flexbox。也就是说，它不是文档流的一部分，应该在它们之上呈现。
我不确定这有什么帮助，但我肯定会添加一个。一秒钟
关于使用 JavaScript 设置尺寸时的闪烁 - 您可以将元素作为可见性开始：隐藏并在调整大小后显示它吗？
@patrickb 我想这是可能的，但这似乎是为了让它工作（从不可见开始，测量，计算宽度和高度，可能增加 1 和然后显示）

标签： javascript html css

【解决方案1】：

如果您愿意再添加一个元素，您可以在绝对定位的元素中使用flex 来使最里面的元素居中，同时保持它从文档流中排除。

.outer {
  margin: 0 auto;
  width: 500px;
  border: 1px solid #ddd;
  height: 50px;
  position: relative;
}

.inner {
  position: absolute;  
  
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center {
    top: 25px;
    background-color: #dfdfdf;
    padding: 5px;
    font-family: Inter;
}

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

<div class="outer">
  <div class="inner">
    <p class="center">
      <b>asdf </b> blurrya
    </p>
  </div>
</div>

【讨论】：

是的，我认为它必须是这样的。好吧，够公平的。谢谢