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

Question

我想对齐三个街区:一个到左边底部，一个在中间顶部，一个在右边底部。

宽度是固定的，但是可能没有一个或两个块。

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

到目前为止，我的解决方案是使用三个宽度相加到容器宽度的inline-block和混合vertical-alignment。但当我把中间块藏起来的时候，它就断了。

我设置了一个在这里拉小提琴来显示我想要的结果，除非我隐藏起来。

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

Answer 1

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

• 当中间隐藏时，左右各占宽度的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/