如何实现边框贴合文本同时居中？解决display属性冲突问题

给你两种简单有效的方案，完美解决你遇到的两难情况：

方案一：inline-block + 父容器居中 #

将目标元素设为inline-block（边框贴合文本宽度），再给它的父容器添加text-align: center实现整体居中：

<!-- 给文本套一个父容器 -->
<div class="title-container">
  <p class="frequently">常见问题</p>
</div>

.title-container {
  text-align: center; /* 父容器控制子元素居中 */
}
.frequently{
  color: rgb(232 87 61);
  border: solid rgb(251 244 239);
  border-radius: 2rem;
  display: inline-block; /* 边框自动适配文本宽度 */
  padding: 0.5rem 1rem; /* 可选：给文字和边框之间加些空隙，视觉更舒服 */
}

方案二：width: fit-content + margin: 0 auto #

用width: fit-content让元素宽度贴合文本，再通过margin: 0 auto实现水平居中，不需要额外父容器：

<p class="frequently">常见问题</p>

.frequently{
  color: rgb(232 87 61);
  border: solid rgb(251 244 239);
  border-radius: 2rem;
  display: block;
  width: fit-content; /* 宽度跟随文本内容 */
  margin: 0 auto; /* 水平方向自动居中 */
  padding: 0.5rem 1rem; /* 可选优化视觉效果 */
}

补充说明 #

• fit-content是现代浏览器都支持的属性，兼容性无需担心；
• 如果用方案一，注意父容器的text-align: center会影响容器内所有行内/行内块元素，若有其他元素需要左对齐，要单独设置。

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