HTML centre a CCS flexible layout [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this 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

Answer 1

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 */
...
}

Answer 2

use align-items property for this problem
.main {
flex: 1;
display:flex;
align-items:center;
}