Question

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

我已经尝试过许多在堆栈溢出时发布的解决方案，但是没有找到解决方法。

我试图在保持响应速度的同时将所有内容水平和垂直对齐，使其位于所有设备的屏幕中间。没有滚动条会很好，但是我猜测可能需要滚动条，特别是在较小的设备（例如iPhone SE）上，这样就可以了。

我最接近的是下面的代码。但这可以正确地居中，例如，在iPhone SE上，徽标和按钮在页面的顶部和底部被切除，而不是像响应式那样调整大小。

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>的轴的弹性方向为列，而行的弹性方向为行，两者都以justify-content：center为中心。使用flex的关键“陷阱”是，第一个flex div中的至少个必须具有高度：100％，因为flex元素的默认高度由其内容决定，而不是父母的身高。

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

1 个答案: