Streaming live at 10am (PST)

Center class on screen vertical / horizontal


#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%);

iOS issue with webkit transform
#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:

For vertical:

and


#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:


#10