Streaming live at 10am (PST)

How to vertically center a container inside a section


#1

Firstly great tool, I like it.

I went through the tutorials, and couldn't find the top and bottom CSS properties in order to vertically center a container inside a section?

Any help would be appreciated.

Thanks and regards,


Vertically aligning text blocks
Vertical Centering
How to vertical center content within a div? : SOLVED
#2

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

  1. give the element a relative position
  2. give it a top:50%;
  3. go down to the transform styles, then give it a -50% y

if you're looking for absolute center of the screen: http://codepen.io/shshaw/full/gEiDt#Fixed


Is it possible to create an image grid like this?
#3

@PixelGeek True, but it transform works for the following:

You can also use jQuery for that. It works on most browsers that allow JavaScript. transform is a CSS3 property that is not supported in older browsers. But it works on most new smile

jQuery:

$(document).ready(function() {
    $('.container-to-center-class').css({
        'margin-top' : $(window).height()/2 - $(this).height()/2
    });
});

#4

Thanks guys.

Yes with pure CSS code it is not hard. I'm wondering if it can be done with WebFlow UI? I couldn't find a way to edit the source code in WebFlow UI.

Cheers.


#5

Custom CSS attributes?


#6

@PixelGeek just said how to do that. Give an object relative position, set it's top value to 50% and go to transitions at the bottom of webflow UI in effects tab and select transform. Set it's translate value to move -50% up.


#7

Ok, thanks a lot, it makes sense.


#8

It is done with your help, webflow.com is awesome.

Another quick question, is it possible for me to chuck in custom HTML, JS, CSS code in webflow UI?


#9

yes. there are three ways:

  1. go to SETTINGS, then CUSTOM CODE, then use the HEAD area
  2. go to SETTINGS, then CUSTOM CODE, then use the BODY area
  3. drag in the EMBED widget into your website and put your code in there.

#10

Thanks, I can see Embed widget, but can't see CUSTOM CODE in settings, only CUSTOM ATTRIBUTE there.


#11

Got it, it is in settings in dashboard.


#12

@Blackbeam remember to put CSS within first field (after <head> tag) and put JS in second field (before </body> tag). Good luck! smile


#13

I cannot figure this out for the life of me. Every time I set the position to relative and use the transform at -50% my content moves halfway off the top of the page. I'm trying to get the container to be in the middle of the page both vertically and horizontally. I want the content to stay in the center when the browser is resized.


#15

As taylorpoe points out directly above, the method works for Absolute rather than Relative positioning, at least for me as well.

I've documented exactly how to use this technique. See here for full notes with screen clips.
http://www.evernote.com/l/ABvZRIu7EbJMqZNcqlGQxFH8TYv0HhIt5Zk/


#16

So I understand that there's no straight forward way of vertically centering content if the parent doesn't have a set height, is this the case? Is there a method to ahcieve this on responsive sites?


#17

Hi @Mowgli, @PixelGeek's initial reply is probably the best solution at the moment. This will work on modern browsers. If you need support for older browsers, then you probably need to investigate a javascript solution.

That is my two cents smile


#18

Sorry to restart an old thread. This isn't working anymore. If i set it to relative and choose a top percentage, webflow ignores it. Any ideas?


#19

Basic stuff to check: Have you set a height somewhere in the hierarchy? Are all elements between that one and the one you want to center set to a percent?


#20

Every other element that it is nested in is set to auto as far as height.


#21

One of those items has to have a set height in px, rem, vh or vw. All divs or elements in between the one with a height attribute and the one you want to vertically center must be set to a height of 100% if you want to fill the available height (or some percent of that height).

The Auto setting will elastically auto expand to fit the cumulative content, padding and rules of anything it contains, but on it's own has no measurable height attribute. So anywhere you insert a div, column, row, etc. with the height set to Auto basically acts as none. Auto is seen by any child as having no height (zero) preventing it from seeing the height of any hierarchical parent elements.

Flexbox will one day cure this giant pain.