如何让Status Div始终居中于虚线边框（适配移动端/桌面端）

你需要实现：移动端视图下，状态标签（status）始终居中在虚线边框的中间，不受上方内容换行影响；桌面端视图下，状态标签位于容器右下角。原代码中因为状态标签的定位基准是整个容器，导致上方内容高度变化时，标签位置偏离虚线边框。

核心解决方案 #

把状态标签嵌套到虚线边框容器内部，让标签的定位基准改为虚线边框本身，再通过媒体查询适配不同端的布局需求。

修改后的代码 #

HTML代码

<div class="container">
  <div class="text">some text that wraps into multiple lines when screen is narrow</div>
  <div class="text">some other text</div>
  <div class="border">
    <div class="status">my status</div>
  </div>
  <div class="text">more text</div>
</div>

CSS代码

.container {
  width: 500px;
  border: 1px solid black;
  position: relative;
  padding-bottom: 40px; /* 给桌面端右下角的status预留空间 */
}

.border {
  border-bottom: 1px dashed black;
  margin: 20px 0;
  position: relative;
  min-height: 32px; /* 保证status不会超出边框容器 */
}

.status {
  height: 32px;
  line-height: 32px;
  border-radius: 7px;
  text-align: center;
  padding: 0 10px;
  width: fit-content;
  font-size: 13px;
  font-weight: bold;
  color: red;
  background-color: pink;
  /* 移动端：相对于border居中 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.text {
  padding: 10px;
}

/* 桌面端适配（断点可根据需求调整） */
@media (min-width: 768px) {
  .border {
    min-height: auto; /* 恢复border原有高度 */
  }
  .status {
    /* 桌面端：相对于container定位到右下角 */
    top: auto;
    left: auto;
    right: 10px;
    bottom: 10px;
    transform: none;
  }
}

关键改动说明 #

• HTML结构调整：将status直接放入border容器内，让border成为它的定位父元素（border已设置position: relative）。
• 移动端居中逻辑：通过top: 50%、left: 50%结合transform: translate(-50%, -50%)实现基于border的精准居中，无论上方内容如何换行，border的位置确定后，标签始终在其中间。
• 桌面端适配：使用媒体查询，当屏幕宽度达到桌面端阈值时，修改status的定位属性，将其固定在container的右下角，同时调整border的高度避免多余空间。
• 容器预留空间：给container添加padding-bottom，确保桌面端右下角的status不会被容器内容遮挡。

内容的提问来源于stack exchange，提问作者user7167081