如何在可变高度 div 上混合垂直和水平对齐？

Question

我想对齐三个块：一个在左下角，一个在中间顶部，一个在右下角。

宽度是固定的，但可能缺少一两个块。

我找不到使用position:absolute 的方法，因为容器必须具有较高块的高度。

到目前为止，我的解决方案是使用三个inline-block，它们的宽度加起来等于容器宽度，并混合了vertical-alignment。但是当我隐藏中间块时它会中断。

我设置了一个fiddle for it here 来显示我想要的结果，除非我隐藏了。

当然，当我隐藏块时，我可以添加一个脚本来设置边距，但我正在寻找一个仅 CSS 的解决方案。另外，我宁愿不使用表格或display:table-cell，因为它们的副作用。

Answer 1

您可以使用display:flex; flex:1 和margin:auto 将远离它应用的方向，在2相反的方向上它将居中：

• 隐藏中间时，左右为宽度的 50%。 div的宽度通过flex:1设置：

$("input").click(() => {
  $("#middletop").toggle();
})

div {
  border: 1px solid green;
  margin: 0;
  flex: 1;
}
#container {
  min-height: 50vh;/* demo purpose */
  display: flex;
}
#leftbottom {
  margin-top: auto;
}
#middletop {
  margin: auto 0;
  text-align: middle;
}
#rightbottom {
  width: 200px;
  margin-bottom: auto;
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="leftbottom">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
  <div id="middletop">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun.
  </div>
  <div id="rightbottom">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>
<input type="button" value="Hide middle" />

https://jsfiddle.net/9b9a7wqv/8/

• 当中间被隐藏时，它会留下一个空隙。这里div的宽度是通过width设置的。

$("input").click(() => {
  $("#middletop").toggle();
})

div {
  border: 1px solid green;
  margin: 0;
  }
#container div {
  width:33%;
}

#container {
  min-height: 50vh;
  display: flex;
}

#leftbottom {
  margin-top: auto;
  margin-right:auto;
  ;
}

#middletop {
  margin: auto 0;
  text-align: middle;
}

#rightbottom {
  margin-bottom: auto;
  margin-left:auto;
  text-align: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="leftbottom">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
  </div>
  <div id="middletop">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun.
  </div>
  <div id="rightbottom">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
</div>
<input type="button" value="Hide middle" />

https://jsfiddle.net/9b9a7wqv/10/