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

Question

I am designing a new page using Bootstrap 4. There are 4 elements in the page header, footer and two content boxes(divs). 我正在使用Bootstrap 4设计一个新页面。页面页眉，页脚和两个内容框（div）中包含4个元素。 Header and footer will remain at top and bottom respectively (using default bootstrap classes for them) but i want both content boxes should appear in middle of the page both horizontally and vertically regardless of the screen size. 页眉和页脚将分别保留在顶部和底部（使用默认的引导程序类），但无论屏幕大小如何，我都希望两个内容框都应水平和垂直出现在页面中间。 One content box beneath the another with space between them. 一个内容框位于另一个下方，并在它们之间留有空间。 You can refer attached picture for same. 您可以参考附带的图片。

I have tried using flex class of bootstrap but it didn't work out much. 我尝试使用bootstrap的flex类，但是效果不佳。

Answer 1

There's a lot of approaches to get this solution. 有很多方法可以获取此解决方案。 That's a simple one: 这很简单：

HTML 的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 的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%);
}

Result 结果

Divs centered 以Divs为中心

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

问题描述

1 个解决方案

解决方案1
1 2019-07-16 11:24:04

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

问题描述

1 个解决方案

解决方案1 1 2019-07-16 11:24:04

解决方案1
1 2019-07-16 11:24:04