如何使用頁眉和頁腳在頁面中間水平和垂直對齊兩個div？

Question

我正在使用Bootstrap 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為中心

如何使用頁眉和頁腳在頁面中間水平和垂直對齊兩個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