Aligning Box to Middle of Container

[Ampharos]

Hi there,

I've searched through the many different alignment questions but couldn't seem to find the answer to my (hopefully easy) one, though perhaps I just don't understand the terminology well enough to know my answer when I saw it.

Anyways, as shown in the image below, I have a text block within a container within a section. I would like to position the container in the middle (vertically) of the section. What would be the best way to do this? I've had similar issues with a logo image inside a navbar as well.

I know I can use the padding/margin buttons, but is there a way to quickly be more precise?

Thanks!

[dkenzik]

Your container element (in your example, the container) must be position: relative.

The item to center (your text block) must be position: absolute. Now, you can move this item around in relation to the parent. Start with one of the position presets (top center, likely) and set the top to 50%. That will center it vertically. Now, set the left and right margin to auto. That will center it horizontally.

You can see an example of this technique in the demo kit:

https://preview.webflow.com/preview/demokit?preview=72388b288a26874be319ca1f7412d4eb

Another technique would be to use flexbox, but that requires custom CSS at this time.

[cyberdave]

Hi @Ampharos. great question There a number of ways to center an element on your screen, and have it remain centered on all views Here is another article that may help:

How to center elements

This quick tutorial will help you center elements (like an image or a block) using CSS. Method #1 Set your element to Display: Inline-Block Set the parent element to Text-Align: Center. Done! Pros: Perfect if you want all the elements inside of the parent element to be centered, so only has to be done once. Cons: You have to set styles on the parent element instead of just the element. Additional Info: When you set an element to Display: Inline Block, the width of the element is aut…

[system]

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.