设置width后标题不再居中的原因及修复方法

设置width: fit-content后标题左对齐的原因是：.titulo作为块级元素，宽度收缩到文本宽度后，默认会在父容器中左对齐，仅靠text-align: center只能让内部文本居中，无法让容器本身居中。只需给.titulo添加margin: 0 auto，就能实现容器居中+背景宽度匹配文本的效果。

修改后的CSS代码 #

body {
  background-color: #302e2f;
}

p {
  /*aplica el estilo a todos los 'p' */
  text-align: center;
  color: rgb(245, 211, 16);
}

p span {
  display: block;
}

.titulo {
  text-align: center;
  color: #f540ec;
  font-size: 30px;
  padding: 30px;
  background-color: lightblue;
  width: fit-content;
  margin: 0 auto; /* 新增这行实现容器水平居中 */
}

h1,
h2,
h3 {
  padding: 3px;
  text-align: center;
  color: rgba(21, 253, 0, 0.3);
  font-family: verdana;
}

对应的HTML代码（无需修改） #

<div class="titulo">Intro de Elden Ring</div>
<p>
  <span>La hojarasca nos cuenta una historia.</span>
  <span>El Gran Círculo de Elden ha sido destruido.</span>
  <span>En nuestro hogar, al otro lado de la niebla, las Tierras Intermedias.</span>
</p>
<h1>XD</h1>
<h2>XD</h2>
<h3>XD</h3>

原理补充 #

• width: fit-content 限制元素宽度仅包裹文本内容，避免背景占满全屏
• margin: 0 auto 利用块级元素的外边距自动分配规则，让元素在父容器（body）中水平居中
• 保留text-align: center 可确保后续文本换行时，内部内容依然保持居中对齐

内容的提问来源于stack exchange，提问作者Alejandro González