CSS布局与响应式设计：解决文本覆盖问题与容器高度管理

body {
  align-items: center;
  background-color: black;
  display: flex;
  height: 00vh; /* 问题所在 */
  justify-content: center;
  margin: 0;
}

body {
  align-items: center;
  background-color: black;
  display: flex;
  /* 移除 height: 00vh; 让body根据内容自动撑开 */
  justify-content: center;
  margin: 0;
  min-height: 100vh; /* 可选：确保body至少占据整个视口高度，以实现全屏居中 */
}

<div class="doi_tuong"
             <p><font color="white" style="font-size:25px">   Lorem et ipsum Lorem et ipsum</font></p>
         </body>
    </div>
</div>

<div class="doi_tuong">
    <p class="text-content">Lorem et ipsum Lorem et ipsum</p>
</div>

/* 优化后的 body 样式 */
body {
  align-items: center;
  background-color: black;
  display: flex;
  justify-content: center;
  margin: 0;
  min-height: 100vh; /* 确保body至少占据整个视口高度 */
}

.doi_tuong {
  align-items: center;
  border-radius: 25px;
  background: #121212;
  box-shadow: 12px 12px 16px 0 rgba(255, 255, 255, 0.3) inset,
              -10px -10px 20px 0 rgba(255, 255, 255, 0.3) inset,
              -8px -8px 12px 0 rgba(255, 255, 255, 0.3) inset;
  cursor: pointer;
  display: flex; /* .doi_tuong 自身也是flex容器，用于居中文本 */
  height: 70px; /* 示例固定高度，可根据需求调整为min-height或相对单位 */
  justify-content: center;
  padding: 3rem;
  text-align: center;
  width: auto;
  transition: all 0.3s ease;
}

.doi_tuong:hover {
    transform: scale(1.05, 1.05);
}

/* 针对文本内容的样式 */
.text-content {
    color: white; /* 字体颜色 */
    font-size: 1.5rem; /* 使用rem单位，更利于响应式 */
    margin: 0; /* 移除p标签默认的外边距 */
    /* 如果需要更复杂的文本布局，可以结合flex-direction: column; 等 */
}

/* 媒体查询示例：在小屏幕上调整字体大小 */
@media (max-width: 768px) {
  .text-content {
    font-size: 1.2rem; /* 手机视图下字体稍小 */
  }
  .doi_tuong {
    padding: 2rem; /* 手机视图下内边距稍小 */
    height: auto; /* 手机视图下高度自适应 */
  }
}

/* 原始代码中的 .text-doi_ 样式，如果它用于包裹文本，需调整其定位策略 */
/* 如果 .text-doi_ 旨在作为 .doi_tuong 的直接子元素并包含文本，
   且 .doi_tuong 已经是 Flex 容器，那么通常不需要 position: absolute;
   除非有特定布局需求。
*/
/* 假设 .text-doi_ 是 .text-content 的父级或替代，其定位需谨慎 */
/*
.text-doi_ {
    position: absolute; // 需谨慎使用，可能导致文本脱离文档流
    display: flex;
    flex-direction: column;
    justify-content: center;
}
*/