html - 垂直和水平对齐内容，同时保持响应

Question

我目前有一个简单的单页网站，它显示一个 Logo 、4 行短文本和 2 个并排的按钮。我正在使用 Bootstrap 4。

我已经尝试过许多关于堆栈溢出的解决方案，但还没有找到解决办法。

我试图水平和垂直对齐所有内容，同时仍然保持响应，因此它位于所有设备屏幕的中间。没有滚动会很好，但我猜可能需要滚动，尤其是在 iPhone SE 等较小的设备上，所以没关系。

我得到的最接近的是下面的代码。然而，这正确居中，例如，在 iPhone SE 上， Logo 和按钮在页面顶部和底部被截断，而不是像响应式那样调整大小。

CSS:

html, body {
    height: 100%;
    font-family: Arial, sans-serif !important;
    overflow:auto;
}

body {
    margin: 0;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

html:

<div class="container">
        <div style="padding:15px;" class="row">
            <div class="col text-center">
                <center>
                    <img src="assets/img/logo.png" class="logo" />
                    <br>
                    <br>
                    <p style="margin-top:1rem;" class="big">text</p>
                    <p>text<br>text<br>text</p><p>text<br>text<br>text</p>
                    <p class="no-margin">PURCHASE TICKET INSTANTLY ONLINE</p>
                    <p class="big">OR</p>
                    <p>RESERVE AND PAY ON ENTRY</p>
                    <br>
                    <div class="row">
                        <div class="col-sm-12 text-center">
                            <a href="purchase">
                                <button style="background-color: #db0e0e !important;border:none;    line-height: 130%;" class="btn btn-danger btn-md center-block">PURCHASE
                                    <br>TICKET ONLINE</button>
                            </a>&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="purchase"><button style="background-color: #ffffff !important;color: #db0e0e !important;border:none;    line-height: 130%;" class="btn btn-danger btn-md center-block">RESERVE
                                <br>PAY ON ENTRY</button></a>

                        </div>
                    </div>
                </center>
            </div>
        </div>
    </div>

Answer 1

flex 。看我的jsfiddle .

关键是用嵌套的 flex 使两个轴居中 <div>一个具有 flex-direction of column 和 flex-direction 之一，两者都带有 justify-content: center。 flex 的关键“陷阱”是第一个 flex div 的至少一个必须具有高度:100%，因为 flex 元素的默认高度由它们的内容决定，而不是他们 parent 的高度。