Justify content center in flex row

Question

I'm trying to build a header component where I want to show an icon in the center of the screen within that header.

My problem is when the right content grows, flexbox shifts everything accordingly and the center content won't get centered anymore, in the given code, the center content of the second container is center within the screen but in the header center it is not the same.

Basically, I want both the center content aligned vertically together with the responsiveness. I have tried justify-self: center; but it's not working...

.container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
  border: 1px solid black;
}

.container>div {
  border: 1px solid black;
  padding: 8px;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

<header class="container">
  <div class="left">Left Content</div>
  <div class="center">Center</div>
  <div class="right">Content With Some More Data</div>
</header>
<div class="container">
  <div class="center">Center</div>
</div>

Of course, it would center relative to the parent. You may want to use nested elements to center. For example, divide the 3 columns into nested flexbox containers. — m4n0, Nov 23 '20 at 12:41
In your example the parent as the flexbox-container defines what "center" is here. If you delete the styling for the .center-class you will see that everything is getting perfectly centered and there is the same space left and right of the elements. So it works as intended. A simple fix could be using "justify-content: space-evenly" on the container and "text-align: center" on the center-class width a fixed with such as 30% on the .container>div -Styling. In some cases thats a viable solution, depends on your Layout idea — Warden330, Nov 23 '20 at 12:55

Justify content center in flex row

0 Answers0