如何在Bootstrap的container容器内居中显示card卡片

• Bootstrap 自带的row类默认是display:flex且宽度100%的块级元素，你给row添加的mx-auto以及自定义centermycard的margin:0 auto没有任何作用：margin:auto实现水平居中的前提是元素有明确的小于父容器的宽度，占满父级宽度的row用这个属性不会产生居中效果。
• 如果你需要的是水平+垂直双居中，你当前的外层容器container和row都没有设置高度，默认高度等于内容高度，没有剩余空间给垂直居中生效。
• 额外冗余问题：card-body内部嵌套container会带来多余的边距，容易导致卡片内容溢出，建议移除或者替换为container-fluid。

仅水平居中卡片 #

直接修改row的类即可，删除多余的自定义CSS和无用类：

<div class="container bg-warning">
    <!-- 删掉mx-auto、centermycard，加justify-content-center -->
    <div class="row justify-content-center">
        <div class="card">
            <!-- 剩余原有内容不变 -->
            <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，完全用不到。

水平+垂直都居中（卡片在整个视口居中） #

给外层容器加高度属性，用Bootstrap自带工具类即可，无需自定义CSS：

<!-- 给外层container加min-vh-100，让它占满整个视口高度 -->
<div class="container bg-warning min-vh-100">
    <!-- 给row加h-100继承父高度，同时加align-items-center垂直居中、justify-content-center水平居中 -->
    <div class="row h-100 align-items-center justify-content-center">
        <div class="card">
            <!-- 剩余原有内容和上面一致 -->
        </div>
    </div>
</div>

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