CSS无法在div内定位元素：实现文本与方块垂直居中对齐

嘿，我明白你想让“square stuff”精准定位在红色方块右侧并垂直居中的需求，咱们来一步步搞定它！首先看看你代码里的几个小问题：

• 重复使用了id="inline"：HTML里id是唯一标识，不能给多个元素用同一个id，应该换成class
• .text里的top:100px直接把文本推到了方块下方，这肯定不是你想要的
• 用position: relative加手动调top值的方式不够精准，而且适配性差

最推荐的解决方案：Flexbox布局 #

Flexbox是现代CSS布局的首选，轻松就能实现垂直居中，代码还简洁。修改后的代码如下：

CSS部分

* { 
  margin: 0; 
} 
.back { 
  background-color: #E8E8E8; 
  display: flex; /* 开启Flex布局 */
  align-items: center; /* 垂直方向居中对齐 */
  gap: 10px; /* 方块和文本之间的间距，替代原来的left:10px */
  justify-content: center; /* 水平居中整个容器内容，替代原来的<center>标签 */
}
.square { 
  height: 50px; 
  width: 50px; 
  background-color: red; 
  transition: all 2s; 
} 
.square:hover { 
  transform: rotate(360deg); 
} 
.text { 
  font-size: 170%; 
  font-family: Arial, Helvetica, sans-serif; 
  color: #CF5757; 
} 
.square:active { 
  height: 100px; 
  transform: rotate3d(0.9, 0.1, 1, -90deg); 
  width: 100px; 
  background-color: darkorchid; 
}

HTML部分

<div class="back">
  <div class="square"></div>
  <div class="text">square stuff</div>
</div>

代码解释 #

1. 把<center>标签换成了Flexbox的justify-content: center，更符合现代CSS规范
2. .back设置display: flex和align-items: center，让里面的方块和文本自动垂直居中
3. 用gap:10px替代.text的left:10px，更直观地控制元素间距
4. 移除了多余的position: relative和top属性，避免手动定位的误差
5. 修正了重复id的问题，把id="inline"去掉（因为Flexbox已经让元素横向排列了）

另一种兼容旧浏览器的方案：inline-block + vertical-align #

如果你需要适配老版本浏览器，也可以用这种方式：

* { margin: 0; }
.back { 
  background-color: #E8E8E8; 
  text-align: center; /* 水平居中 */
}
.square, .text {
  display: inline-block;
  vertical-align: middle; /* 关键：让元素垂直居中对齐 */
}
.square { 
  height: 50px; 
  width: 50px; 
  background-color: red; 
  transition: all 2s; 
  margin-right: 10px; /* 方块和文本的间距 */
}
/* 其他样式保持不变 */

这样修改后，无论方块大小怎么变化，文本都会自动和它保持垂直居中对齐啦！

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