如何在可变高度 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/

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

How do I mix vertical and horizontal alignment on a variable height div?

css

alignment

vertical-alignment