Css 如何对齐引导4，中间的水平列表组

我使用的代码片段来自（如下所示） 水平对齐列表组中的项目（在引导4中）

如何将列表组居中对齐？我尝试添加class

text center

和其他一些东西，但没有成功

<div id="app" class="container my-container">

    <!-- Header -->
    <h2 class="text-center" >Sample Header</h2>

    <!-- Buttons -->
    <div class="list-group list-group-horizontal">
        <a href="#" class="list-group-item active">Categories</a>
        <a href="#" class="list-group-item">Search</a>
    </div>

</div>

样本头

---

为了子孙后代： 如果您的元素不是flex元素，请应用

d-flex资源中心

原始答案：
将
justify资源中心
应用到
列表组

代码笔：

以下是文档：


....
....
为子孙后代：
如果您的元素不是flex元素，请应用
d-flex资源中心

原始答案：
将
justify资源中心
应用到
列表组

代码笔：

以下是文档：


....
....
使用，更改元素的水平位置：


.list-group.list-group-horizontal{
显示器：flex；
弯曲方向：行；
}
.list-group.list-group-horizontal.list组项目{
页边距底部：0；
右边距：0；
右边框宽度：0；
}
.list-group.list-group-horizontal.列表组项：第一个子项{
边框右上角半径：0；
边框左下半径：4px；
}
.list-group.list-group-horizontal.列表组项：最后一个子项{
边框右上角半径：4px；
边框左下半径：0；
右边框宽度：1px；
}

样本头
使用，更改元素的水平位置：


.list-group.list-group-horizontal{
显示器：flex；
弯曲方向：行；
}
.list-group.list-group-horizontal.list组项目{
页边距底部：0；
右边距：0；
右边框宽度：0；
}
.list-group.list-group-horizontal.列表组项：第一个子项{
边框右上角半径：0；
边框左下半径：4px；
}
.list-group.list-group-horizontal.列表组项：最后一个子项{
边框右上角半径：4px；
边框左下半径：0；
右边框宽度：1px；
}

样本头
有效，但似乎不需要
d-flex
。是否需要
d-flex
？您是对的-不需要。需要使元素
显示为：flex
，但在您的情况下，它已经是了。@zer0:我建议在您的答案中添加d-flex。。。将来使用你答案的人会被误导。。。他们只会在css中添加“justify content center”类，并期望一切都能正常工作。这是可行的，但似乎
d-flex
不是必需的。是否需要
d-flex
？您是对的-不需要。需要使元素
显示为：flex
，但在您的情况下，它已经是了。@zer0:我建议在您的答案中添加d-flex。。。将来使用你答案的人会被误导。。。他们只会在css中添加“justify content center”类，并期望一切正常。
<div id="app" class="container my-container">

    <!-- Header -->
    <h2 class="text-center" >Sample Header</h2>

    <!-- Buttons -->
    <div class="list-group list-group-horizontal">
        <a href="#" class="list-group-item active">Categories</a>
        <a href="#" class="list-group-item">Search</a>
    </div>

</div>

<div class="list-group list-group-horizontal justify-content-center">
....
....
</div>