How to have middle element always perfectly centered using flexbox

Question

Lookin at the example below, my goal is to have the middle item centered at all times - directly centered in the container div. Then for the left and right items to be aligned to the far left and right of the container.

Below is the styling I have for the container, however it is still putting even space between the elements, thus the middle element doesn't stay in the exact middle. What I want would result in more space between the left and middle elements compared to the right and middle element - but the middle element is again centered always

How do I achieve this?

display: flex;
  justify-content: center;
  align-items: center;

  .left {
    margin-right: auto;
    justify-self: center;
    align-self: center;
  }

  .right {
    margin-left: auto;
    justify-self: center;
    align-self: center;
  }

Example Image

please share your css and html, so it can be used to recreate your issue. — user1579234, Jan 23 '19 at 17:34

score 2 · Answer 1 · answered Jan 23 '19 at 17:32

You can use justify-content: space-between; on the parent container.

.parentContainer {
 display: flex;
 justify-content: space-between;
}

<div class="parentContainer">
 <div class="left">1</div>
 <div class="middle">2</div>
 <div class="right">3</div>
</div>

How to have middle element always perfectly centered using flexbox

1 Answers1