如何仅使用h1标签和CSS实现边框贴合内容且居中的效果

可以实现，无需额外div标签，仅通过给h1添加CSS样式即可满足需求，以下是常用实现方案：

方案1：使用fit-content（最直观，推荐） #

实现原理 #

h1默认是块级元素，宽度默认占满父容器（通常为body），因此边框会延伸至整行。通过width: fit-content可让h1的宽度自动适配内部文本的宽度，实现边框贴合内容；再通过margin: 0 auto让块级元素在父容器内水平居中。

代码示例 #

HTML代码：

<h1 id="unJoyeux">Test</h1>

CSS代码：

#unJoyeux {
  color: orange;
  border: 2px solid black;
  /* 宽度贴合内容 */
  width: fit-content;
  /* 水平居中 */
  margin: 0 auto;
}

兼容性 #

支持所有现代浏览器（Chrome、Firefox、Safari 11+、Edge）。

方案2：使用table布局（兼容性最佳） #

实现原理 #

设置display: table的元素特性与表格一致，宽度默认跟随内容大小，同时支持通过margin: 0 auto实现水平居中，兼容IE8及以上版本。

代码示例 #

CSS代码只需修改为：

#unJoyeux {
  color: orange;
  border: 2px solid black;
  display: table;
  margin: 0 auto;
}

方案3：定位+transform实现 #

如果需要适配特殊场景，也可以通过定位偏移实现：

#unJoyeux {
  color: orange;
  border: 2px solid black;
  display: inline-block;
  position: relative;
  /* 向左偏移父容器宽度的50% */
  left: 50%;
  /* 再向右偏移自身宽度的50%，实现居中 */
  transform: translateX(-50%);
}

原有代码问题说明 #

你之前写的margin: center是无效属性值，margin的合法取值仅为长度单位、百分比、auto，center不是合法值；你之前依赖父div的text-align: center实现居中，是因为h1设置为inline-block后，行内块元素会受父元素文本对齐属性影响，使用上述方案去掉父div也可正常实现需求。

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