无需position absolute：实现右侧div文本居中且不溢出的响应式布局

现有两个div，需满足以下要求：

• 右侧div内的文本始终处于屏幕居中位置
• 文本绝对不能超出所在div的范围
• 实现响应式布局，适配PC、平板、手机等设备
• 禁止使用position: absolute属性

修改后的CSS代码 #

.screen-1 {
  width: 100%;
  display: grid;
  grid-template-columns: 100px 1fr;
}

.div-1 {
  background-color: green;
  width: 100px;
  grid-row: 1;
  z-index: 1;
}

.div-2 {
  background-color: red;
  grid-column: 1 / -1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 小屏适配：屏幕宽度小于200px时改为并排布局 */
@media (max-width: 199px) {
  .screen-1 {
    grid-template-columns: auto 1fr;
  }
  .div-2 {
    grid-column: 2;
  }
}

对应HTML代码 #

总宽度 = 屏幕宽度
<br><br>

实现效果：
<div class="screen-1">
  <div class="div-1">logo</div>
  <div class="div-2">text</div>
</div>

实现思路 #

1. 大屏布局：利用CSS Grid让右侧.div-2跨占整个网格行，宽度与屏幕一致，通过text-align: center实现文本屏幕居中；左侧.div-1通过z-index: 1显示在上方，不遮挡文本。
2. 文本溢出控制：给.div-2设置overflow: hidden、text-overflow: ellipsis和white-space: nowrap，确保文本永远不会超出div边界，超出时自动显示省略号。
3. 小屏适配：添加媒体查询，当屏幕宽度小于200px（logo宽度+右侧最小可用宽度）时，切换为两列并排布局，此时文本在自身div内居中，保证小屏设备的布局合理性。

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