如何实现元素居中并独占一行？页面样式调试求助

问题分析 #

当前布局的核心问题：

• 全局*选择器的padding:10px会给所有元素添加内边距，干扰居中布局和元素间距
• .converter-tab使用display:block，但align-items:center是Flex布局属性，无法生效，导致内部元素无法居中且不能独占一行
• 部分容器缺少必要的居中配置

修复方案（修改CSS） #

替换原有CSS为以下代码，关键修改点已标注：

* {
  box-sizing: border-box;
  margin: 0;
  /* 移除全局padding，避免干扰所有元素布局 */
  font-family: Arial, Helvetica, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* 给body添加合理的内边距，替代全局padding */
  padding: 10px;
}

.container {
  padding: 2rem 1rem;
  margin: 0 auto;
  /* 确保容器水平居中 */
}

.converter-tab {
  /* 改用flex布局，实现垂直排列+居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  background: #6943ff;
  width: 550px;
  height: 285px;
  /* 添加内边距，避免元素贴边 */
  padding: 20px;
  /* 让元素之间有间距 */
  gap: 20px;
}

.converter-input {
  width: 117px;
  height: 83px;
  background: none;
  border: solid 1px white;
  color: white;
  font-size: 2.5rem;
  /* 输入框文本居中 */
  text-align: center;
}

.converter-btn {
  width: 117px;
  height: 42px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
}

.output {
  background: #f4f4f4;
  color: #5a537b;
  width: 550px;
  height: 400px;
  /* 使用flex布局让内部子容器居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.length,
.volume,
.mass {
  width: 500px;
  height: 108px;
  background: #ffffff;
  margin-bottom: 20px;
  /* 内部文本居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

效果说明 #

1. 整个页面容器.container水平居中
2. .converter-tab内的标题、输入框、按钮独占一行，且在容器内垂直+水平居中
3. 输出区域的每个结果卡片内部文本也实现居中
4. 移除全局padding后，布局间距更可控

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