如何让Flexbox容器自适应宽度并居中，同时使按钮并排对齐？

你的问题出在块级Flex容器的默认宽度特性：display: flex的元素默认是块级元素，width: auto对块级元素来说意味着占满父容器的可用宽度，所以不会让容器自适应内容宽度。

以下两种方案可以解决：

方案一：使用width: fit-content #

给.cta-primary设置width: fit-content，它会让容器宽度收缩到内容所需的最小宽度，同时保持块级元素特性，margin: 0 auto依然能正常居中容器。

修改后的CSS：

.cta-primary {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content; /* 宽度适配内容 */
    margin: 0 auto; /* 居中容器 */
}

.cta-primary .button-group {
    display: flex;
    gap: 10px;
}

方案二：改用display: inline-flex #

将容器改为行内Flex元素，它会自动根据内容调整宽度，再通过父元素的text-align: center实现居中：

CSS：

/* 给.cta-primary的直接父容器添加 */
.cta-container {
    text-align: center;
}

.cta-primary {
    display: inline-flex; /* 行内flex容器，宽度随内容变化 */
    justify-content: center;
    align-items: center;
}

.cta-primary .button-group {
    display: flex;
    gap: 10px;
}

HTML：

<div class="cta-container">
    <div class="cta-primary">
        <div class="button-group">
            <a href="contact" class="btn btn-primary">One</a>
            <a href="contact" class="btn btn-primary">Two</a>
        </div>
    </div>
</div>

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