How to center elements

Community resources Webflow Tips
1

This quick tutorial will help you center elements (like an image or a block) using CSS.

Method #1

  1. Set your element to Display: Inline-Block
  2. Set the parent element to Text-Align: Center.
  3. 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 automatically calculated by the contents of the element. So if it’s an image it will be the width of the image or if it’s a text element the width will become as wide as the text is. With the Inline Block setting you can stack elements right next to each other as well. If you don’t want elements to stack next to each other you will have to set some or all of the elements to be Display: Block, which stack on top of each other instead of next to each other. If you are trying to center typography just align your text to center.

Method #2

  1. Set your element to Display: Block
  2. Set left and right margins to auto.
  3. Set a width on the element.
  4. Done!

Pros: In this method you only have to add CSS to the element, not the parent element as well.
Cons: You have to set a width on the element (pixels or percent width). Not good for text elements.

Additional Info: When you set an element to Display: Block the width of the element becomes 100% by default, so it will expand the full width of the parent element. This is obvious with buttons and blocks, but not so obvious with text and images. Block elements stack on top of each other. They do not stack next to each other like Inline-block elements if their widths are small enough to fit next to each other in the parent element. The way to make block elements stack next to each other is to use Method 1 or to use Float left or right, but it’s not possible to center floated elements without doing more complex layout stuff.

7 Likes
2

You can always center verticaly using the following sweat feature!

Let’s say you have a 500px height block in which you want to have a 200px image to be centered verticaly. Make that block position: relative and the image position: absolute; Image should have top: 50% (notice the %-sign). Now on the right panel scroll to transforms and move the image 50% up.

Quick explanation:

When you make the parent object position: relative; you can then use absolute positioning for child elements that are within this block. Using top: 50% on the child element will move the image down 50% of the parent element’s height. When you use the transform section to move element 50% up it will move the child element up 50% of its height :slight_smile:

6 Likes
3

@bartekkustra How do you make this vertical align with the parent div 100% with - 100% height.

Imagine you have your main div full browser with/height, you put this parent div relative and then there’s a inner div inside with fixed with and height. If you put this inner div with absolute position and give it 50% top and 50% down, well… i´m what i´m doing wrong?

1278×841 396 KB

4

5

Life saver as usual - i’d been struggling with this for ages - got it ok on one resolution not on others with my old methos.

Now its perfect on all (except mobile as not got to that yet since sites not finished)

Sneak peak here: http://www.overtongraphics.com/ (only first pages working so far rest yet to be built)

Thanks again @bartekkustra

1 Like