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

Posted

技术标签:

【中文标题】当其他元素居中对齐时，使用 Flexbox 将页脚与页面底部对齐【英文标题】：Align footer to bottom of page with Flexbox when another elements aligned center 【发布时间】：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>

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

【问题讨论】：

【参考方案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。

【讨论】：

以上是关于当其他元素居中对齐时，使用 Flexbox 将页脚与页面底部对齐的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 flexbox 垂直居中文本？ [复制]

使用 flexbox 左对齐和居中对齐元素

将一个项目居中对齐，其他项目与 Flexbox 对齐 [重复]

CSS：居中对齐文本，同时将容器的其他元素保持在左侧[重复]

CSS Flexbox 居中对齐

Vue组件更改时将页脚保留在页面底部