html - bootstrap 4列的内容难以垂直居中

Question

我遇到的问题是，如果我将 my-auto 类应用于列 div，所有内容都按预期垂直居中，但 div 的背景图像也是如此。我尝试仅将内容包装在 div 中并应用 my-auto，将垂直居中的 css 类应用到仅针对元素的子元素或第一个子元素的列 div（通常会导致失去响应能力）。我不完全确定接下来要尝试什么，这有点令人沮丧。我尝试的一切要么将图像的顶部和底部与它的内容一起粉碎到列的中心。或者当屏幕尺寸变小时导致内容不再响应并从列中出来。

我的 HTML

<div class="col-sm-6 mail-bg text-black">
                <h1>Subscribe to our Mailing List!</h1>
                <p>Sign up and stay up to date with anything Any Given Room! By
                    signing up you will receive a 10% discount on our merch for life!
                    And if you get tired of us? Cancel your subscription at any time.
                <p>
                    <span class="text-danger"
                        ng-show="subForm.subInput.$touched && subForm.subInput.$invalid"><b>Email
                            field cannot be empty.</b></span>
                <form name="subForm">
                    <div class="form-group my-3">
                        <input type="text" name="subInput" class="form-control"
                            placeholder="Enter email" ng-model="mailForm.email" required>
                    </div>
                    <a class="w3-button w3-black w3-border my-3" type="submit"
                        ng-click="subscribe()">Subscribe</a>
                </form>
        </div>

我的 css 类添加了背景图像。（只是为了清楚起见）

.mail-bg {
    background-image: url("./images/letter background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

标签： htmlcssbootstrap-4vertical-alignment