如何在div元素内居中span元素并实现hover时字体放大变色效果

核心问题原因 #

1. 原生<span>为行内元素，transform属性对行内元素不生效，你当前写的scale放大效果实际无法触发
2. text-align: center是块级元素的属性，需要写在父容器上才能控制内部行内/行内块内容居中，写在<span>自身上无效
3. 原方案用position: relative偏移无法实现水平居中，且垂直居中用固定百分比适配性差

可行修改方案（Flex布局，适配性最高） #

核心修改点 #

• 父容器.welcome开启Flex布局，直接实现内部子元素水平+垂直居中，无需手动计算偏移值
• 给.button类新增display: inline-block，既保留元素宽度匹配文本内容的特性（保证只有悬停在文本上才触发hover），又支持transform属性生效

完整修改后代码 #

CSS

.welcome {
  border-width: 4px;
  border-style: solid;
  border-color: red;
  border-radius: 50px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -310px;
  margin-left: -600px;
  height: 600px;
  width: 1200px;
  /* 新增Flex布局属性 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  color: green;
  /* 新增行内块属性 */
  display: inline-block;
  /* 可选：加过渡让动画更流畅 */
  transition: all 0.3s ease;
}

.button:hover {
  transform: scale(1.2);
  color: blue;
}

.title {
  font-size: 120px;
}

HTML（无需修改）

<div class="welcome">
  <span class="button title"> Mancala </span>
</div>

备选方案（不改动父容器布局） #

如果不想修改父容器的Flex布局，可以用以下方案：

1. 给.welcome加text-align: center
2. 给.button加display: inline-block
3. 自行调整.title的垂直偏移值即可实现效果

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