Hey Davey, these techniques are no doubt straightforward; however, they are fairly rigid because if the reliance on position: absolute. You mention flexbox and grid, and I think those would be a more appropriate approach if the element doesn't specifically require absolute positioning for some other reason.
Centering in flexbox is trivial. On the parent, simply put the following:
That gets you a both horizontally and vertically centered child. You can remove either one (or change them to other values) based on how you want horizontal and vertical positioning to go. If you haven't done so, definitely give flexbox a go. It's well worth the time to learn because it simplifies basically everything layout related. And the Grid makes it even easier. flexboxfroggy.com/ is an awesome resource for it.
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 :).
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.
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.
Hey Davey, these techniques are no doubt straightforward; however, they are fairly rigid because if the reliance on
position: absolute
. You mention flexbox and grid, and I think those would be a more appropriate approach if the element doesn't specifically require absolute positioning for some other reason.Centering in flexbox is trivial. On the parent, simply put the following:
That gets you a both horizontally and vertically centered child. You can remove either one (or change them to other values) based on how you want horizontal and vertical positioning to go. If you haven't done so, definitely give flexbox a go. It's well worth the time to learn because it simplifies basically everything layout related. And the Grid makes it even easier. flexboxfroggy.com/ is an awesome resource for it.
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 :).
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.
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.
Thanks for the feedback Alex. I’m fairly new to CSS so thanks for explaining :)
Using FlexBox, a 3rd box can be centered on my example above with code like:
Thanks everyone for the advice.
You bet, keep up the good work!