如何将图标置于左侧矩形中部？尝试text-align:center未达预期

方法1：Flex布局（推荐） #

给左侧矩形容器添加flex属性，实现图标水平+垂直居中：

.left-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;    /* 垂直居中 */
  width: 60px; /* 根据实际需求设置宽度 */
  height: 60px; /* 根据实际需求设置高度 */
}

将位置图标放入该容器即可完成居中。

方法2：Grid布局 #

单元素居中的极简实现：

.left-container {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
}

方法3：行内元素适配方案 #

如果图标是行内/行内块元素，可通过line-height配合text-align实现垂直+水平居中：

.left-container {
  text-align: center;
  height: 60px;
  line-height: 60px; /* 数值与容器高度一致 */
  width: 60px;
}
.location-icon {
  display: inline-block; /* 确保继承line-height */
}

方法4：绝对定位+位移 #

适合需要脱离文档流的场景：

.left-container {
  position: relative;
  width: 60px;
  height: 60px;
}
.location-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

为什么text-align:center无效？ #

常见原因：

• 图标是块级元素：块级元素会占满容器宽度，text-align对其无效，需先设置display: inline-block
• 容器未设置明确宽度：text-align作用于容器内部元素，容器宽度若与父元素一致，居中效果不明显
• 需求是垂直居中，但text-align仅控制水平方向

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