Streaming live at 10am (PST)

Aligning Box to Middle of Container


#1

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!


#2

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.


#3

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


#4

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