Question

我正在使用引导程序4设计一个新页面。页面页眉，页脚和两个内容框（div）中包含4个元素。页眉和页脚将分别保留在顶部和底部（使用默认的引导程序类），但无论屏幕大小如何，我都希望两个内容框都应水平和垂直出现在页面中间。一个内容框位于另一个下方，并在它们之间留有空间。您可以参考附带的图片。

我尝试使用bootstrap的flex类，但效果不佳。

Answer 1

有很多方法可以获取此解决方案。这很简单：

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link
          rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous"
        />
        <link rel="stylesheet" href="css/style.css" />
        <title>Document</title>
    </head>
    <body>
        <header class="container-fluid">HEADER</header>

        <main>
            <div class="center">
                <div id="container-1" class="">DIV 1</div>
                <div id="container-2" class="">DIV 2</div>
            </div>
        </main>
        <footer class="container-fluid">FOOTER</footer>
    </body>
</html>

CSS

header {
    background-color: red;
}

body {
    margin-bottom: 60px; /* Margin bottom by footer height */
}

footer {
    background-color: green;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px; /* Set the fixed height of the footer here */
    line-height: 60px; /* Vertically center the text there */
}

#container-1 {
    padding: 100px;
    margin-bottom: 150px;
    background-color: yellow;
}

#container-2 {
    padding: 100px;
    background-color: blue;
}

.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

结果

Divs centered

如何使用页眉和页脚在页面中间水平和垂直对齐两个div？

1 个答案: