html – 居中和底部对齐d性项目

概述我有一个Flex容器(蓝色方块)，具有以下属性： display: flex;justify-content: center;align-items: center;flex-wrap: nowrap; 因此，它的孩子(浅蓝色方块)如下所示排列自己。但是，我想在正常流程中添加另一个子项(绿色方块)并将其相对于其父项定位。如下所示定位它，我最好写一些像bottom：20px;和保证金：auto 我有一个Flex容器(蓝色方块)，具有以下属性：

display: flex;justify-content: center;align-items: center;flex-wrap: nowrap;

因此，它的孩子(浅蓝色方块)如下所示排列自己。但是，我想在正常流程中添加另一个子项(绿色方块)并将其相对于其父项定位。如下所示定位它，我最好写一些像bottom：20px;和保证金：auto;。

我试图玩z-index无济于事。我该怎么办呢？我应该求助于创建另一个父元素吗？

解决方法 以下是实现此布局的五个选项：

> CSS定位
>带有隐形DOM元素的FlexBox
>带有隐形伪元素的FlexBox
> FlexBox Flex：1
> CSS网格布局

方法#1：CSS定位属性

应用位置：相对于flex容器。

将位置：绝对应用于绿色d性项目。

现在绿色方块绝对位于flex容器内。

更具体地说，绿色方块从文档流中移除，但仍保持在nearest positioned ancestor的范围内。

使用顶部，底部，左侧和右侧的CSS偏移属性移动绿色方块。

flex-container {  display: flex;  justify-content: center;  align-items: center;  flex-wrap: nowrap;  position: relative;  border: 4px solID blue;  height: 300px;  wIDth: 300px;}flex-container > flex-item:first-child {  display: flex;}flex-container > flex-item:first-child > flex-item {  border: 4px solID aqua;  height: 50px;  wIDth: 50px;  margin: 0 5px;}flex-container > flex-item:last-child {  position: absolute;  bottom: 40px;  left: 50%;  transform: translateX(-50%); /* fine tune horizontal centering */  border: 4px solID chartreuse;  height: 50px;  wIDth: 50px;}

<flex-container>    <flex-item><!-- also flex container -->	    <flex-item></flex-item>	    <flex-item></flex-item>	    <flex-item></flex-item>    </flex-item>    <flex-item></flex-item></flex-container>

一个警告：某些浏览器可能无法从正常流程中完全删除绝对定位的d性项目。这会以非标准的，意外的方式更改对齐方式。更多细节：Absolutely positioned flex item is not removed from normal flow in Firefox & IE11

方法#2：Flex auto margins&隐形Flex项目(DOM元素)

通过结合使用auto margins和新的隐形柔性项目，可以实现布局。

新的柔性项目与底部项目相同，并放置在另一端(顶部)。

更具体地说，因为柔性对准基于自由空间的分布，所以新项目是必要的平衡以保持三个蓝色框垂直居中。新项目必须与现有绿色项目的高度相同，否则蓝色框将不会精确居中。

新视图已从视图中删除，其中visibility：hIDden。

简而言之：

>创建绿色框的副本。
>将其放在列表的开头。
>使用d性自动边距使蓝色框保持居中，两个绿色框从两端创建相等的平衡。
>应用可见性：隐藏到重复的绿色框中。

flex-container {    display: flex;    flex-direction: column;    align-items: center;    border: 4px solID blue;    height: 300px;    wIDth: 300px;}flex-container > flex-item:first-child {    margin-top: auto;    visibility: hIDden;}flex-container > flex-item:nth-child(2) {    margin-top: auto;    display: flex;}flex-container > flex-item:last-child {    margin-top: auto;    margin-bottom: auto;}flex-container > flex-item:first-child,flex-container > flex-item:last-child {    border: 4px solID chartreuse;    height: 50px;    wIDth: 50px;}flex-container > flex-item:nth-child(2) > flex-item {    border: 4px solID aqua;    height: 50px;    wIDth: 50px;    margin: 0 5px;}

<flex-container>    <flex-item></flex-item>    <flex-item><!-- also flex container -->	    <flex-item></flex-item>	    <flex-item></flex-item>	    <flex-item></flex-item>    </flex-item>    <flex-item></flex-item></flex-container>

方法#3：Flex auto margins&隐形Flex项目(伪元素)

这种方法类似于#2，除了它在语义上更清洁，并且必须知道绿箱的高度。

>创建一个与现有绿色框具有相同高度的伪元素。
>使用:: before将其放在容器的开头。
>使用d性自动边距保持蓝色框居中，绿色伪和DOM元素从两端创建相等的平衡。

flex-container {    display: flex;    flex-direction: column;    align-items: center;    border: 4px solID blue;    height: 300px;    wIDth: 300px;}flex-container::before {  content: "";  margin-top: auto;  height: calc(50px + 8px);  /* height + borders */  visibility: hIDden;}flex-container > flex-item:first-child {  margin-top: auto;  display: flex;}flex-container > flex-item:last-child {  margin-top: auto;  margin-bottom: auto;  border: 4px solID chartreuse;  height: 50px;  wIDth: 50px;}flex-container > flex-item:first-child > flex-item {  border: 4px solID aqua;  height: 50px;  wIDth: 50px;  margin: 0 5px;}

<flex-container>    <flex-item><!-- also flex container -->        <flex-item></flex-item>	    <flex-item></flex-item>	    <flex-item></flex-item>    </flex-item>    <flex-item></flex-item></flex-container>

方法#4：将flex：1添加到顶部和底部项目

从上面的方法#2或#3开始，不要担心顶部和底部物品的高度相等以保持平衡，只需给每个物品弯曲：1。这将迫使它们消耗可用空间，从而使中间物品居中。

然后，您可以将display：flex添加到底部项目以对齐内容。

方法#5：CSS网格布局

这可能是最干净，最有效的方法。不需要绝对定位，虚假元素或其他Hackery。

只需创建一个包含三行的网格。然后居中对齐第二行和第三行中的项目。第一行可以保持为空。

grID-container {  display: grID;  grID-template-rows: repeat(3,1fr);  align-items: center;  justify-items: center;  border: 4px solID blue;  height: 300px;  wIDth: 300px;}grID-item:nth-child(2) {  display: flex;}grID-item:nth-child(2)>flex-item {  wIDth: 50px;  height: 50px;  margin: 0 5px;  border: 4px solID aqua;}grID-item:nth-child(3) {  border: 4px solID chartreuse;  height: 50px;  wIDth: 50px;}

<grID-container>  <grID-item></grID-item>  <grID-item><!-- also flex container -->    <flex-item></flex-item>    <flex-item></flex-item>    <flex-item></flex-item>  </grID-item>  <grID-item></grID-item></grID-container>

总结

以上是内存溢出为你收集整理的html – 居中和底部对齐d性项目全部内容，希望文章能够帮你解决html – 居中和底部对齐d性项目所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。