当其他元素居中对齐时，使用 Flexbox 将页脚与页面底部对齐答案

【问题标题】：Align footer to bottom of page with Flexbox when another elements aligned center当其他元素居中对齐时，使用 Flexbox 将页脚与页面底部对齐
【发布时间】：2021-06-24 00:20:57
【问题描述】：

我找不到如何使用 flexbox 垂直对齐中心的 div 元素和对齐页面底部的页脚元素。

HTML 和 CSS

.section {
    height: 100vh;
    display: flex;
    align-items: center;
}
.container {
    width: 100%;
    max-width: 1400px;
    padding: 0 15px;
    margin: 0 auto;
}
.section__header {
    text-align: center;
}
.footer {
    margin: auto;
    max-width: 848px;
}

<section class="section contact">
    <div class="container">
        <div class="section__header">...</div>
        <div class="contact__form">...</div>
        <footer class="footer"></footer>
    </div>
</section>

我尝试使用几乎所有选项都没有成功...所有我得到的 - 现在所有元素都水平和垂直居中，但是如何将页脚与底部对齐并将所有其他元素留在中心？

【问题讨论】：

标签： html css flexbox center

【解决方案1】：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.section {
    display: flex;
    height: 100vh;
    justify-content: space-between;
    flex-direction:column;
    border:1px solid sienna;
}
.container {
    display:flex;
    justify-content:center;
    flex-direction:column;
    width: 100%;
    max-width: 1400px;
    padding: 0 15px;
    margin: 0 auto;
    border:1px solid black;
}
.section__header {
    text-align: center;
    border:1px solid maroon;
}

.contact__form{
    border:1px solid blue;
}

.footer {

    border:1px solid red;
}

<section class="section contact">
    <div class="container">
        <div class="section__header">header</div>
        <div class="contact__form">contact</div>
       
    </div>
    
     <footer class="footer">footer</footer>
</section>

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ========== Meta Tags ========== -->
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- ========== Title ========== -->
    <title>stack</title>

    <style type="text/css">
        *,
        *:before,
        *:after {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -ms-box-sizing: border-box;
        }

       .section {
            height: 100vh;
            width: 100%;
            
            background: green;
        }
        .container {
            width: 100%;
            height: 100%;
            /*max-width: 1400px;*/
            padding: 0 15px;
            /*margin: 0 auto;*/

            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: blue;
        }
        
        .contentContainer {
            height: 80%;
            width: 100%;

            display: flex;
            flex-direction: column;
            justify-content: center;
            background: green;
        }
        
        .section__header {
            /*text-align: center;*/
            background: grey;
        }

        .contact__form {
            background: violet;
        }

        .footer {
            height: 20%;
            width: 100%;
            background: yellow;
            /*margin: auto;*/
            /*max-width: 848px;*/
        }
    </style>
</head>
<body>
    <section class="section">
        <div class="container">
            <div class="contentContainer">
                <div class="section__header">header</div>
                <div class="contact__form">form</div>
            </div>
            <footer class="footer">footer</footer>
        </div>
    </section>
</body>
</html>

为内容创建一个单独的容器并使用space-between。

【讨论】：