Discussion on: Centring an element on a page

View post

Replies for: Hey Davey, these techniques are no doubt straightforward; however, they are fairly rigid because if the reliance on position: absolute. You mention...

Thanks for that Jordan. I’ve been looking at Flexbox but it’s taking a while for me to fully understand it. What you’ve done certainly looks easier so I'll give it a try. Thanks :).

Jordan Kicklighter • Sep 7 '20

No problem! Feel free to send me a message if you have any questions. Like I mentioned, that froggy game does an excellent job of showing how each piece works individually and then has you put them together into more complex layouts.

Alex Trost • Sep 7 '20

I can’t agree with Jordan more. The absolute positioning methods explained here don’t allow for changes in screen or content size. Please use flex box and Grid to center things.

Davey • Sep 7 '20

Thanks for the feedback Alex. I’m fairly new to CSS so thanks for explaining :)

Davey • Sep 7 '20

Using FlexBox, a 3rd box can be centered on my example above with code like:

<div class="center-container">
    <div class="centered">I am a centered div using FlexBox</div>
</div>

.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.centered {
    width: 600px;
    height: 500px;
    background-color: aquamarine;
}

Thanks everyone for the advice.

Jordan Kicklighter • Sep 7 '20

You bet, keep up the good work!