Centering multiple items in flexbox not working as expected

Question

I am trying to vertically content within a div with flexbox, so that it always remains centered.

However it is not working as expected. Interested to see where I'm going wrong.

Just to confirm, the 'left div' should display the contents in regular vertical order, not horizontally as is currently happening.

section {
  display:flex; 
}

div {
  padding:12px;
  width:400px;
  height:300px;
  display:flex;
  align-items:center;
}

.left {background:#bada55}
.right {background:red}

<section>
            <div class="left">
                <h2>Very long title</h2>
                <p>Caption goes here</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at magni est facilis error! Perspiciatis ab tempore qui mollitia, nihil itaque praesentium deleniti hic asperiores soluta, rem natus. Quidem, necessitatibus?</p>
            
            </div>
            <div class="right">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa distinctio, labore, quod ex blanditiis totam esse eligendi consequatur inventore reprehenderit temporibus architecto molestias ratione, ullam deserunt tempora nesciunt corrupti! Tempora!</p>
            </div>
            
        </section>

Link to codepen

use column in left and then justify-content:center – Temani Afif Jan 14 '21 at 11:37 — Temani Afif, Jan 14 '21 at 11:37

Daniel_Knights · Accepted Answer · 2021-01-14T11:46:13.340

1

You can use flex-direction on .left to make it center vertically:

section {
  display: flex;
}

div {
  padding: 12px;
  width: 400px;
  height: 300px;
  display: flex;
}

.left {
  background: #bada55;
  flex-direction: column;
  justify-content: center;
}

.right {
  background: red;
  align-items: center;
}

<section>
  <div class="left">
    <h2>Very long title</h2>
    <p>Caption goes here</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at magni est facilis error! Perspiciatis ab tempore qui mollitia, nihil itaque praesentium deleniti hic asperiores soluta, rem natus. Quidem, necessitatibus?</p>
  </div>
  <div class="right">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa distinctio, labore, quod ex blanditiis totam esse eligendi consequatur inventore reprehenderit temporibus architecto molestias ratione, ullam deserunt tempora nesciunt corrupti! Tempora!</p>
  </div>
</section>

edited Jan 14 '21 at 11:46

answered Jan 14 '21 at 11:27

Daniel_Knights

7,940
4
21
49

Sorry I was just about to edit my original post. The trouble with flex-direction:column (and justify content) is that it centers each element. I want the relationship between the elements to stay the same, I just want to center the group. Does that make sense? I'd also like to avoid adding another div just to do this – Adam Jan 14 '21 at 11:30
Couldn't you just use `align-items: center` on `.right` instead? – Daniel_Knights Jan 14 '21 at 11:32
No that doesn't work as it doesn't vertically center the .left contents. To make it clearer, this is visually the result i'm looking for https://codepen.io/juicypixels/pen/oNzQGNa – Adam Jan 14 '21 at 11:40

Leonardum · Answer 2 · 2021-01-14T11:54:40.073

EDIT based on your comment, I believe this works:

section {
  display: flex;
  align-items: center;
  height: 300px;
}

div {
  width: 400px;
  padding: 12px;
}

div.right {
  display: flex;
  align-items: center;
}

<section>
  <div class="left">
    <h2>Very long title</h2>
    <p>Caption goes here</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque at magni est facilis error! Perspiciatis ab tempore qui mollitia, nihil itaque praesentium deleniti hic asperiores soluta, rem natus. Quidem, necessitatibus?</p>
  </div>

  <div class="right">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa distinctio, labore, quod ex blanditiis totam esse eligendi consequatur inventore reprehenderit temporibus architecto molestias ratione, ullam deserunt tempora nesciunt corrupti! Tempora!</p>
  </div>      
</section>

No that doesn't work as it doesn't vertically center the .left contents. To make it clearer, this is visually the result i'm looking for https://codepen.io/juicypixels/pen/oNzQGNa — Adam, Jan 14 '21 at 11:41

Centering multiple items in flexbox not working as expected

2 Answers2