如何垂直居中浮动元素[重复]

Question

* {
  margin: 0px;
}
.container {
  background: #ccc;
  line-height: 50px;
  verticle-algn: middle;
  clear: both;
}
.float {
  overflow: hidden;
  float: right;
}

<div class="container">
  <button class="inside">inside</button>
  <button class="float">float</button>
</div>

请检查这个例子。我希望.float元素垂直居中.container元素作为.inside元素。但是无论我触发BFC还是添加pseudo element，我都不能清除float 元素的影响。我认为保证金不是解决此问题的最佳方法。您能告诉我如何解决，谢谢您的帮助。

Answer 1

按照您的预期尝试它的工作。

* {
margin: 0px;
}
.container{
display:flex;
justify-content: space-between;
background: #ccc;
line-height: 50px;
}
.float{
margin: 0 auto;
}

<div class="container">
<div class="inside"><button>inside</button></div>
<div class="float"><button>float</button></div>
</div>