如何在div中居中绝对定位的元素

技术背景

在前端开发中，有时需要将绝对定位的元素在其父元素中居中显示。这在创建模态框、提示框等组件时非常常见，能让页面布局更加美观和一致。然而，由于绝对定位的元素脱离了文档流，其居中操作会复杂一些，需要使用特定的CSS技巧来实现。

实现步骤

方法一：使用 left 和 right 以及 margin-inline

<div>
  <div id="content">
    I'm the content
  </div>
</div>

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-inline: auto; 
  width: fit-content;
}

方法二：使用 left: 50% 和 translate

<div style="position: absolute; left: 50%;">
  <div style="position: relative; left: -50%; border: dotted red 1px;">
    I am some centered shrink-to-fit content! <br />
    tum te tum
  </div>
</div>

方法三：使用 transform 实现水平和垂直居中

<div class="outer">
  <div class="inner">I'm always centered <br/> doesn't matter how much text, height or width I have. <br/> The dimensions or my parent are irrelevant as well.</div>
</div>

.outer {
    position: relative; 
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}

方法四：使用 flexbox

<div class="relative center-text">
  Relative Block
  <div class="absolute-block center-text">Absolute Block</div>
</div>

.relative {
  width: 275px;
  height: 200px;
  background: royalblue;
  color: white;
  margin: auto;
  position: relative;
}

.absolute-block {
  position: absolute;
  height: 36px;
  background: orange;
  padding: 0px 10px;
  bottom: -5%;
  border: 1px solid black;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}

方法五：使用 calc() 针对 aspect-ratio:1 的元素

<div></div>

:root{
  --diameter: 80px;
}
div{
  position:absolute;
  top: calc(50% - var(--diameter)/2);
  right:calc(50% - var(--diameter)/2);
  aspect-ratio:1;
  width:var(--diameter);
  border-radius:100%;
  background:blue;
}

方法六：使用 table-cell

<div id='parent'>
  <div id='child'></div>
</div>

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}

方法七：使用 text-align 和 inline-block

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

#block {
    display: inline-block;
}

核心代码

以下是部分核心代码示例：

/* 水平居中 */
.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

/* 水平和垂直居中 */
.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

最佳实践

• 响应式设计：优先使用 transform 实现水平和垂直居中，因为它不需要知道元素的具体宽度和高度，适用于各种尺寸的屏幕。
• 兼容性考虑：如果需要兼容旧版浏览器（如 Internet Explorer 8 及以下），可以考虑使用 left: 50% 和相对定位的方式组合实现。
• 代码简洁性：尽量选择简洁易懂的代码，避免过度复杂的布局方式，提高代码的可维护性。

常见问题

问题一：元素无法居中

• 原因：父元素可能没有设置 position: relative，导致绝对定位的元素相对于文档的全局位置进行定位。
• 解决方法：确保父元素设置了 position: relative 或 --tt-darkmode-color: #A3A3A3;">原因：在使用 left: 50% 和 translate 时，元素可能会超出父元素的范围，导致页面出现滚动条。
• 解决方法：可以在父元素中使用 overflow: hidden 来隐藏溢出的部分。

问题三：文字模糊

• 原因：使用 transform 时，某些浏览器可能会导致文字模糊。
• 解决方法：可以添加 text-transform: uppercase 或 -webkit-font-smoothing: antialiased 来解决。