如何让信息文本框居中于已居中的容器上方？

核心思路 #

让.info-container与.container保持水平对齐+垂直上下排列，可通过两种常见方式实现，根据你的现有代码选择适配方案：

方案1：基于margin的传统居中（适合已有.container用margin:0 auto居中的场景） #

如果你的.container是通过margin: 0 auto实现水平居中，直接给.info-container添加相同的水平居中规则，并设置底部外边距拉开与主容器的间距：

/* 调整.info-container样式 */
.info-container {
  /* 与.container保持一致的宽度/最大宽度，确保视觉对齐 */
  width: 400px; 
  max-width: 90%; /* 响应式适配小屏幕 */
  
  /* 水平居中 + 顶部留白 + 与主容器的间距 */
  margin: 2rem auto 1.5rem; 
  
  /* 其他原有样式（背景、内边距等）保留 */
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 8px;
}

/* 确保.container的居中规则不变 */
.container {
  width: 400px;
  max-width: 90%;
  margin: 0 auto;
  /* 原有样式保留 */
}

方案2：基于Flex的容器包裹（更灵活的现代布局） #

如果想让整体布局更可控，给两个容器加一个外层包裹，通过Flex实现垂直排列+水平居中：

HTML结构调整

<div class="page-wrapper">
  <div class="info-container">
    <!-- 信息文本内容 -->
  </div>
  <div class="container">
    <!-- 密码检查器主内容 -->
  </div>
</div>

CSS样式调整

.page-wrapper {
  /* 垂直排列子元素 + 水平居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  
  /* 页面顶部留白，避免贴顶 */
  padding: 2rem 1rem;
  
  /* 两个容器之间的间距 */
  gap: 1.5rem;
}

.info-container, .container {
  /* 占满可用宽度，但不超过最大限制 */
  width: 100%;
  max-width: 400px;
  
  /* 各自原有样式保留 */
}

注意事项 #

1. 若你的.info-container设置了position: absolute或float，需先移除这些属性，否则会破坏正常流布局；
2. 确保两个容器的box-sizing都设置为border-box，避免内边距/边框导致宽度溢出：

* {
  box-sizing: border-box;
}

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