How to vertically center a floating element [duplicate] - css

Question

This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
How can I vertically align elements in a div?
(28 answers)
Center one and right/left align other flexbox element
(11 answers)
Closed 3 years ago.
* {
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>
Please check this example.I want the .float element to be vertically centered of the .container element as the .inside element.But no matter I trigger BFC or add a pseudo element, I can not clear the impact of the float element.I don't think margin is a best way to solve this.Can you tell me how to fix it, thanks for your help.

Answer 1

Try this its work what you expected.
* {
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>