Center class on screen vertical / horizontal

Design help General
1

How do you center a class on the screen vertically and horizontally.

ie: always in the center of the screen

  • regardless of screen size
  • regardless of screen resize.
2

It’s all over on Google…

Horizontal:

display:block
margin:0,auto

Vertical:

position: relative;
top: 50%;
transform: translateY(-50%);
3

yes. It is. And I can get it work if I write the code by hand.

But I cannot get it to work in the Webflow Editor.

4

Oh, ok, easy.

For the horizontal, you must have figured this out, there’s also the shortcut button:

http://vincent.polenordstudio.fr/snap//Webflow_-_My_Sandbox_2015-03-02_14-21-15.jpg

For vertical:

http://vincent.polenordstudio.fr/snap//Webflow_-_My_Sandbox_2015-03-02_14-21-48.jpg

and

http://vincent.polenordstudio.fr/snap//Webflow_-_My_Sandbox_2015-03-02_14-22-16.jpg

4 Likes
5

Thanks Vincent. That’s “close” to what I did.

I could not get vertical centering with Relative

  • due to several fixed DIV’s I have

So I’m using absolute.

  • position: absolute
  • top: 50%
  • z-index: 500
  • display:block
  • width: 100%
  • transform: Move Up 50%

A reboot seems to have fixed it…
- but I just noticed the generated code is slightly different:

  position: absolute;
  left: 0px;
  top: 50%;
  z-index: 5000;
  display: block;
  width: 100%;
  -webkit-transform: translate(0px, -50%);
  -ms-transform: translate(0px, -50%);
  transform: translate(0px, -50%);

Notice, Webflow used translate with 2 parameters

  • instead of translateY with 1 parameter.

It does the same things though…

  • not sure why Webflow chose to use translate
  • when no X parameter was provided.
6

and here’s another little oddity…

if you center the a text block vertically and horizontally absolute…

then create an interaction that rotates the text block

  • 360 degrees to the right, then
  • 360 degrees to the left…

Using the Preview Interaction button (not Preview Website option)
Webflow will instead

  • move the text block down the line height of the textbox
    ---- instead of doing a rotate 360
  • and may or may not do the rotate -360.

Sometimes it does the rotate -360… sometimes not.

The Preview Website option… creates even more interesting affects.

7

Because it’s better.

If you’re that much interested into how CSS works I recommend you do a pause testing what Webflow does and read/learn about the foundations of CSS. Tons of books and online classes all over.

8

Hey - I see this comment is a bit over a year old. Has Webflow moved the translate panel or renamed it?

9

It’s called transition and transforms:

http://vincent.polenordstudio.fr/snap/xz3fh.jpg

1 Like