如何用CSS实现自适应内容宽度的居中弹性h1标题

你的问题核心有两个：

• CSS选择器匹配错误：你给h1加了title类，但CSS写的是.title h1，这会匹配class为title的父元素下的h1，而非你实际的h1.title。
• h1是块级元素，默认会撑满父容器100%宽度，需要修改显示方式让宽度自适应内容。

修正后的代码 #

h1.title {
    text-align: center;
    font-family: 'Namecat';
    color: #e20c70;
    font-size: 70px;
    filter: none;
    border: 4px solid #d10459;
    letter-spacing: 5px;
    border-radius: 20px;
    padding: 5px; /* 简化多方向padding的写法 */
    display: inline-block; /* 让宽度自适应内容 */
    box-shadow: 0 0 0.2rem #fff, 0 0 0.1rem #fff, 0 0 1rem #d10459, 0 0 0.3rem #d10459, 0 0 1.8rem #d10459, inset 0 0 0.2rem #d10459;
}

<h1 class="title">Lorem aaaa bbb</h1>

补充说明 #

• 使用display: inline-block后，h1宽度会自动匹配内容长度，但此时margin: auto无法让它居中，需要给它的父元素（比如body或包裹容器）添加text-align: center;。
• 若不想修改父元素样式，可改用display: table;，这样margin: 0 auto依然能让h1居中，同时宽度自适应内容：

h1.title {
    /* 其他样式保留 */
    display: table;
    margin: 0 auto;
}

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