html - 如何在容器内居中卡片（引导程序）

Question

我有一个容器，里面有一张卡片。我尝试使用 justify-content-center、mx-auto 和硬编码 css 属性将卡片带到容器的中心，但我没有得到实际输出。

这是我的html文件

<div class="container bg-warning">
    <div class="row  mx-auto centermycard">
        <div class="card mx-auto ">
            <div class="card-title"><h2 class="text-center">Find Lyrics For Your Song</h2></div>
            <div class="card-body ">
                <div class="container">
                    @using (Html.BeginForm("FetchLyrics", "LandingPage", FormMethod.Get, Model))
                    {
                        @Html.ValidationSummary(true, "Please fix the below errors")

                        <div class="form-group">
                            @Html.LabelFor(model => model.songname, "I want a Song")
                            @Html.TextBoxFor(model => model.songname, new { @class = "form-control" })
                            @Html.ValidationMessageFor(m => m.songname)
                        </div>


                        <div class="form-group">
                            @Html.LabelFor(model => model.moviename, "From Movie")
                            @Html.TextBoxFor(model => model.moviename, new { @class = "form-control" })
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.artist, "By Artist")
                            @Html.TextBoxFor(model => model.artist, new { @class = "form-control" })
                        </div>


                        <div class="form-group">
                            @Html.LabelFor(model => model.genre, "In genre")
                            @Html.TextBoxFor(model => model.genre, new { @class = "form-control" })
                        </div>

                        <div class="form-group">
                            <button class="btn btn-block btn-primary col-md-8 col-lg-8 text-center justify-content-center">Search</button>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
</div>

centermycard css 属性

.centermycard {
   margin:0 auto;
}

我错过了哪里？

Answer 1

将课程添加mx-auto到卡片上效果很好。JSFiddle

但是，我不明白您为什么在卡本身中使用容器。您已经将整个东西封装在一个容器中。