如何对齐 Bootstrap 4，水平列表组居中

我正在使用这段代码here https://gist.github.com/danielflippance/d6401c926b4fb2442e15（如下所示） 水平对齐列表组中的项目（在 Bootstrap 4 中）。

    .list-group.list-group-horizontal{
        display: flex;
        flex-direction: row;
    }

    .list-group.list-group-horizontal .list-group-item {
        margin-bottom: 0;
        margin-right: 0;
        border-right-width: 0;
    }
    .list-group.list-group-horizontal .list-group-item:first-child {
        border-top-right-radius:0;
        border-bottom-left-radius:4px;
    }
    .list-group.list-group-horizontal .list-group-item:last-child {
        border-top-right-radius:4px;
        border-bottom-left-radius:0;
        border-right-width: 1px;
    }

如何居中对齐列表组？我尝试添加课程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>

Codepen https://codepen.io/raelb/pen/JwJLqj

为了后代： Apply d-flex justify-content-center如果您的元素不是弹性元素。

原答案： Apply justify-content-center to the list-group

代码笔：https://codepen.io/anon/pen/gZRzOR https://codepen.io/anon/pen/gZRzOR

它在文档中：https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

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