Align one container in center with display flex [duplicate] - css

Question

This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 3 years ago.
.container {
display: flex;
}
.container>div {
border:2px solid red;
padding:15px;
}
<div class="container">
<div class="one">one</div>
<div class="two">two</div>
</div>
I want to align the <div class="two">two</div> in the middle of the page. The first div should still on the left side. How to align the block two in the center?

Answer 1

Can achieve this with the mix of position absolute and flex
.container {
display: flex;
justify-content: center;
position: relative;
}
.container>div {
border:2px solid red;
padding:15px;
}
.one-absolute {
position: absolute;
left: 0;
}
<div class="container">
<div class="one one-absolute">one</div>
<div class="two">two</div>
</div>

Answer 2

You can use css grid to do that
.container{
display: grid;
grid-template-columns: auto auto auto;
}
.container>div {
border:2px solid red;
padding:15px;
width:50px;
}
<div class="container">
<div class="item">one</div>
<div class="item">two</div>
</div>

Answer 3

Thanks for the good question,
we can use two flex properties along with container class.
justify-content:center; and align-items:center;
.container {
display: flex;
justify-content:center;
align-items:center;
background:pink;
min-height:200px;
}
.container>div {
border:2px solid red;
padding:15px;
}
<div class="container">
<div class="one">one</div>
<div class="two">two</div>
</div>
Note: I additionally add min-height:400px; and background:pink; for demonstration. You can remove both of those.

Answer 4

Flex may not be the right solution for this scenario.
Instead CSS positioning could be used to align one div at the center.
But if you still want flex, add a third empty div and hide it.
<div class="container">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
.
.container {
display: flex;
}
.container>div {
border:2px solid red;
padding:15px;
flex: 1;
}
.container>div.three {
opacity: 0;
}