HTML & CSS, how to center 3 divs inside a div? - html

Question

I am trying to position 3 div in the center of another div but I'm having issues with the positioning. I tried using verticle-align, and negative margins but nothing seems to be working.
.float-container {
border: 3px solid red;
padding: 250px;
position: relative;
background-color: lightblue;
}
.float-child {
width: 150px;
height: 150px;
float: left;
padding: 10px;
border: 2px solid red;
margin: 30px;
vertical-align: middle;
}
<div class="float-container">
<div class="float-child">
<div>Float Column 1</div>
</div>
<div class="float-child">
<div>Float Column 2</div>
</div>
<div class="float-child">
<div>Float Column 3</div>
</div>
</div>

Answer 1

example for my comment
vertical alignment is not avalaible for floatting elements. Nowdays, for this kind of layout, grid or flex are efficient, flexible and easy to put in action. This is not a float job ;)
.float-container {
border: 3px solid red;
display:flex;
align-items:center;
justify-content:center;
gap:30px;
min-height:500px;
position: relative;
background-color: lightblue;
}
.float-child {
width: 150px;
height: 150px;
padding: 10px;
border: 2px solid red;
}
<div class="float-container">
<div class="float-child">
<div>Float Column 1</div>
</div>
<div class="float-child">
<div>Float Column 2</div>
</div>
<div class="float-child">
<div>Float Column 3</div>
</div>
</div>
children only need now to be sized . alignement gap in between them is set from the flex parent. A min-height is given (500px inspirated from your padding 250px)

Answer 2

Remove the float: left; and in its place add display: flex;, justify-content: center;, align-items: center;, flex-direction: row;. For requirements like these, flex and grid are usually much simpler to implement.

Answer 3

.float-container {
display: flex;
padding: 250px;
position: relative;
align-items: center;
border: 3px solid red;
justify-content: center;
background-color: lightblue;
}
.float-child {
width: 150px;
height: 150px;
padding: 10px;
border: 2px solid red;
margin: 0 10px;
vertical-align: middle;
}
<div class="float-container">
<div class="float-child">
<div>Float Column 1</div>
</div>
<div class="float-child">
<div>Float Column 2</div>
</div>
<div class="float-child">
<div>Float Column 3</div>
</div>
</div>

Answer 4

An easy and "modern" way is to use Flexbox if there are no limitations being set as part of a requirement to use float. As an example:
.container {
border: 3px solid red;
padding: 20px;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.child {
width: 150px;
height: 150px;
padding: 10px;
border: 2px solid red;
}
<div class="container">
<div class="child">
Float Column 1
</div>
<div class="child">
Float Column 2
</div>
<div class="child">
Float Column 3
</div>
</div>