html - 垂直对齐以 Bootstrap 4.1 中的横向方向问题为中心

Question

在横向时，我的垂直对齐集中(卡在屏幕中央)有问题，它会剪切各种信息，例如我的图像( Logo )。 ..

“问题” 出现在MAIN 标签 的h-100、CONTAINER 和行 ..

但我不知道为什么会出现这种方向的问题，因为我正在关注引导文档，我知道解决这个问题的唯一方法是使用@media queries，但是这会“干扰”其他笔记本电脑和计算机的分辨率。 ..

我该怎么办，为什么会出现这个问题？

CSS:

html,
body { height: 100%; }

HTML:

<main class="h-100">
    <div class="container h-100">
        <div class="row justify-content-center align-items-center h-100">
            <div class="col-12">
                <div class="card mx-auto d-block shadow-md-large w-md-80 w-lg-50">
                    <div class="card-header bg-transparent border-0 py-md-5">
                        <img src="/img/logo/aliansce_full.svg" alt="Aliansce Shopping Centers" class="CLI img-fluid mx-auto d-block" autocomplete="on" autofocus require>
                    </div>
                    <div class="card-body px-md-5">
                        <form autocomplete="on">
                            <div class="form-group EGLF mt-4 mt-md-0">
                                <input type="text" id="FLUI" class="form-control FI EFLI border-top-0 border-right-0 border-left-0 rounded-0 shadow-none" autocomplete="on" autofocus required>
                                <!-- FLOAT LABEL EFFECT -->
                                <label fo="FLUI" id="FLUL" class="EFL">Usuário</label>
                                <span class="EFHL"></span>
                                <span class="EFBL"></span>
                                <!-- FRONTEND RESPONSE ERROR MESSAGE -->
                                <div id="FBMEU" class="FBMEU ml-1 text-danger"></div>
                            </div>
                            <div class="form-group EGLF mt-4">
                                <input type="password" id="FLUPI" class="form-control FI EFLI border-top-0 border-right-0 border-left-0 rounded-0 shadow-none" min="1" maxlength="10" required>
                                <!-- FLOAT LABEL EFFECT -->
                                <label for="FLUPI" id="FLUPL" class="EFL">Senha</label>
                                <span class="EFHL"></span>
                                <span class="EFBL"></span>
                                <!-- FRONTEND RESPONSE ERROR MESSAGE -->
                                <div id="FBMEUP" class="ml-1 text-danger"></div>
                            </div>
                            <div class="form-group mt-5">
                                <button type="button" id="FBSL" class="btn btn-primary w-esm-100 mb-2 px-lg-5">LOGIN</button>
                                <button type="button" class="btn bg-light w-esm-100 px-lg-5">VOLTAR</button>
                            </div>
                        </form>
                        <!-- BACKEND RESPONSE ERROR MESSAGE -->
                        <div class="text-center text-danger">
                            Usuário ou senha incorretos.
                            <br> Caso esteja com dificuldades, clique em "Precisa de Ajuda?".
                        </div> 
                    </div>
                    <div class="card-footer bg-white border-0">
                        <button type="button" class="btn btn-link mx-auto d-block">Precisa de Ajuda?</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

Answer 1

我假设您想将卡片对齐在两个轴的中心。如果是这样，这可能会解决您的问题。

---

没有必要使用网格布局，因为您只有一张卡片。此外，最好不要更改card 的display。就这样吧。

---

在 main 元素上使用以下类

• d-flex
• flex-column 改变其方向，使其内容保持其固有属性，例如 width。
• 由于它的方向现在是列，使用justify-content-center 将其内容垂直对齐在中心。否则，您会使用 align-items-center。

---

添加一个新的 d-flex 元素并在其上使用 justify-content-center 使其内容在中心水平对齐。

---

添加另一个 block 元素并在其上使用 w-md-80 w-lg-50。

https://codepen.io/anon/pen/jQQrog