HTML centre a CCS flexible layout

Question

I'm using this example codepen as the basis of a simple site.

This works well but I'd like the layout to sit centred on the page, not full height. Please see example image.

Is there anyway to do this and retain the flexibility of the page ?

I've tried adding height or max-height to the wrap but that hasn't made any difference.

Thanks

there penty questions with anwser on how to vertical center divs or elements on SO already: https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers - what is not working for you there? flexibility with vertical center is a broad term. At no point responivness is influenced by centering elements. — tacoshy, Dec 12 '20 at 11:57
try to see this: https://stackoverflow.com/questions/6464592/how-to-align-entire-html-body-to-the-center — ppwater, Dec 12 '20 at 12:00

Karol · Accepted Answer · 2020-12-12T12:17:50.993

So, you want to use align-items: center;. But you have to choose where to use it. If you want the sidebar to stay as it is, you should change the html code a bit:

<div class="content">
   <div class="inner">
      Actual content goes here.
   </div>
</div>

and in css:

.content {
  display: flex;
  justify-content: center;
}

Now the yellow background will stay as it is, but the text will be vertically centered.

If you put display: flex; and justify-content: center; on .main both sidebar and content will get centered. Then it will look like that:

html:

<div class="content">
   Actual content goes here.
</div>

and css:

.main {
    flex: 1;
    display:flex;
    align-items:center;
}

EDIT: Since I misunderstood the question I'll answer it here but I'll leave the part above because someone might find it usefull.

So, you will need to modify styling for .wrap. Since you have flex-direction: column; set on it, to center it vertically you have to use justify-content: center; instead of align-items: center because now the main axis is the vertical one. So:

.wrap {
    display: flex;
    ...
    justify-content: center;
}
.main {
    max-height: 500px; /* set whatever you want */
    ...
}

he is not talkign about the sidebar but the whole page while talking about `height` and `max-height`. So the only logical conclusion is, that he tries to center the whole element vertically. — tacoshy, Dec 12 '20 at 12:04
Its the whole page I'd like to center, not the content with in it. The codepen shows the page taking the full height of the screen, My image is an example of what I'm trying to do. Thx — Rocket, Dec 12 '20 at 12:08

score 0 · Answer 2 · answered Dec 12 '20 at 12:02

0

use align-items property for this problem

.main {
    flex: 1;
    display:flex;
    align-items:center;
}

answered Dec 12 '20 at 12:02

Fatemeh Azizkhani

266
3
16

That will also center the sidebar and I don't think that's what he's looking for. – Karol Dec 12 '20 at 12:03
he is talking about the whole page while talking about `height` and `max-height`. So the only logical conclusion is, that he tries to center the whole element vertically. – tacoshy Dec 12 '20 at 12:05
@tacoshy - correct its the whole page I'd like to center. How do I do that ? – Rocket Dec 12 '20 at 12:07
1

@Rocket you have 2 comments under your questions with links to the solutions. Espacially the last will be able to help you easily – tacoshy Dec 12 '20 at 12:12

HTML centre a CCS flexible layout

2 Answers2