Html 将元件（柔性件）固定到容器底部

我有一个容器，其高度/宽度应为整个窗户的高度/宽度。在这个容器中，我想要一个垂直和水平居中的表单。下面，我还希望在容器的底部基线上有一份副本。类似于下面糟糕的插图。现在，我只能让它们都垂直居中，无法找到一个好方法，使底部复制引脚本身的容器底部

---------
|       |
|       |
|<form> |
|       |
|<copy> |
---------

提交
Lorem ipsum door sit amet，奉献精英。所有人都有一张巨大的脸，脸上有一种独特的脸谱，这是智者的别名

将

柔性方向

更改回

列

，将其中一个容器设置为

宽度：100%

，并使用

柔性包裹：包裹

实现此目的

类似这样的东西（它将在Firefox和IE10+中使用，并带有供应商前缀）：

.container{
背景色：#333；
宽度：100%；
高度：100vh；
显示器：flex；
柔性包装：包装；
对齐项目：柔性端；
证明内容：中心；
}
.页脚{
宽度：100px；
高度：20px；
页边距上限：-20px；/*将页边距上限设置为负值
高度为，因此形状完全居中*/
背景色：#900；
颜色：#fff；
文本对齐：居中；
}
.表格包装{
宽度：100%；/*必须为100%才能强制包裹项目*/
高度：50px；
背景色：#009；
/*将窗体置于包装器内的中心*/
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

提交
页脚内容

您可以通过在容器上使用

:before

创建一个伪元素，将其设置为三个部分，并使用

对齐内容：空格


*{
保证金：0；
}
.集装箱{
背景色：#eee；
高度：100vh；
宽度：100vw；
显示器：flex；
证明内容：之间的空间；
弯曲方向：立柱；
文本对齐：居中；
}
.货柜：在{
内容：''；
}

提交
Lorem ipsum dolor sit amet，奉献精英。所有人都有一张巨大的脸，脸上有一种独特的脸谱，这是智者的别名

以下是您遇到的问题：

您已将
弹性方向设置为
列
。这意味着你改变了方向

align-*
属性沿横轴工作。因此，当您告诉
.bot
对齐self:flex end
时，实际上是告诉它向右移动，而不是向下移动

但在这种情况下，它不会向右移动，因为项目占用了容器的整个宽度，因此没有空间移动。然而，如果你限制它的宽度

想要将
固定到屏幕底部，flexbox有一点限制：有

完成这项工作还有其他几种选择。您可以将FlexBox嵌套在当前容器中，或从此容器中删除
.bot
，然后将其放置在另一个容器中

Flexbox还允许使用。试试这个：

.container {
    position: relative; /* establish nearest positioned ancestor for abs. positioning */
}

.bot {
    position: absolute;
    bottom: 0;
}


注意：
.bot
上的
margin-top:auto
在当前HTML结构中不起作用。实际上，它会将目标元素固定到底部。但它也会将居中元素一直推到顶部。
对齐自：柔性端没有所需的效果，因为flex子项是以列的形式排列的

在不添加任何额外标记的情况下，根据需要将其排列的一种简单方法是：


将页脚元素移出
.container

<div class="container"></div>
<p class="bot"></p>


提交
Lorem ipsum door sit amet，奉献精英。所有人都有一个巨大的面部丘比特，在智者的名字中有一个特殊的身份。更新答案
使用，您可以将flex项目分组或打包在一起，而无需额外标记，或者通过在相反方向上应用边距来移动元素（如我的原始答案所示）。在这种情况下，只需在表单上设置
margin:auto
；这将通知flex容器将表单置于所有剩余可用空间的中心：


.flex容器{
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
高度：150像素；
宽度：400px；
背景：#e7e7e7；
}
形式{
保证金：自动；
}
p{
保证金：0；
}

提交

Lorem ipsum dolor sit amet

它实际上不起作用。如果将
margintop:auto
应用于
.bot
，它确实会将段落发送到底部。但它也会将表单一直发送到顶部。您所做的是将
表单
制作成高度为100%
的嵌套flexbox。正是这个flexbox将段落保持在底部。在代码段中，删除
页边距顶部：auto
。您将看到该段保留在底部。并不是说嵌套的flexbox不是一个好的解决方案；-）@迈克尔：嗯，你说得对——谢谢你指出这一点！我想我还有更多的研究要做：）marginauto和flexbox不应该像这样混合。读者：继续寻找下面的正确答案。这个解决方案的唯一问题是伪元素和页脚（
.bot
）的高度必须始终相等。否则，表单将不会在容器中垂直居中。事实上，在再次阅读问题后，现有答案都不正确，请注意，OP希望表单在整个页面中垂直居中。正确。但我相信我的演示符合这个要求。哦，刚才看到了，是的，位置方法。唯一的问题是小视口高度上的重叠。您的解决方案很好。它只需要