How to set card to middle inside col-md in bootstrap 4

Question

i want to set this card in the middle not center , how to do that? I already try using my-auto but that doesn't work at all.

Please review my code and make some changes. thanks!

my script :

    <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>

what i want

Answer 1

my-auto might be working but its container doesn't seem to have a height property set. Try making the div containing the card full height. You can use h-100