How to keep a div centered using flex in CSS?

Asked Feb 26 '21 at 14:04

Active Feb 26 '21 at 14:08

Viewed 19 times

I have 3 divs

.container {
width: 100%;
display: flex;
flex-flow: row;
align-items: center;
}

.left {
  width: 200px;
}

.right {
  width: 400px;
}

.middle {
  flex-grow: 1;
}

html :

<div class="container">
  <div class="left"/>
  <div class="middle"/>
  <div class="right"/>
</div>

I want the middle div to always be centered relative to the container no matter the width changes of left or right divs. Apparently, my main concern is that I need a centered div, and have other divs left or right that do not mess up the position of the center div.

asked Feb 26 '21 at 14:04

but-why

check this: https://stackoverflow.com/q/55393088/8620333 (updated the duplicate since the initial one was irrelevant) – Temani Afif Feb 26 '21 at 14:08
This does not answer my question. I ask for something more specific. Ok, let me check the other one – but-why Feb 26 '21 at 14:08
@TemaniAfif Yes, the second link answers my question, but it is way hard to search for it, given there is a classical question not related to my issue or the link you provided. – but-why Feb 26 '21 at 14:13
since I have answered that question, it's easy for me ;) – Temani Afif Feb 26 '21 at 14:14
@TemaniAfif Hahahahaha, nice! – but-why Feb 26 '21 at 14:15

How to keep a div centered using flex in CSS?

0 Answers0