如何在引导程序 4 中将卡设置为 col-md 的中间位置 [重复]答案

【问题标题】：How to set card to middle inside col-md in bootstrap 4 [duplicate]如何在引导程序 4 中将卡设置为 col-md 的中间位置 [重复]
【发布时间】：2020-08-06 18:49:45
【问题描述】：

我想把这张卡放在中间而不是中间，怎么做？我已经尝试过使用 my-auto，但这根本不起作用。

请检查我的代码并进行一些更改。谢谢！

我的脚本：

    <div class="container">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="card text-white" style="background: #DA4453;  /* fallback for old browsers */
                background: -webkit-linear-gradient(to right, #89216B, #DA4453);  /* Chrome 10-25, Safari 5.1-6 */
                background: linear-gradient(to right, #89216B, #DA4453); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
                ">
                    <div class="card-header">
                        <h4>Update Antibot API Key</h4>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('updateApiKey') }}" method="POST">
                            @csrf
                            <input value="{{ $blocker ? $blocker->antibot_api : '' }}" class="form-control" type="text" name="antibot_api" placeholder="Insert your api key">
                            <button class="btn btn-outline-light mt-3 float-right" type="submit">Update</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col-md-3"></div>
        </div>
      </div>

我想要什么

【问题讨论】：

“中间”是什么意思？你的意思是垂直居中吗？
@Zim 我已经在寻找垂直居中了，但是结果还是一样的，所以我基本上叫它在“中间”

标签： html css bootstrap-4 stylesheet

【解决方案1】：

my-auto 可能正在工作，但它的容器似乎没有设置 height 属性。尝试制作包含卡片全高的 div。您可以使用 h-100

【讨论】：

这已经解决了，感谢@Ricardo 的回答