+ 1

How to center my animation

Animation https://code.sololearn.com/WLHijO4AkCUY/?ref=app

animation

24th Feb 2018, 6:58 AM

dee ambagan

5 Answers

+ 12

Ah centering, a web devs worst nightmare! Or at least it's mine...

24th Feb 2018, 7:00 AM

Ahri Fox

+ 6

@Ahri: Vertical centering WAS a nightmare before Flexbox model ( even it was possible using table behaviour, or as tried by OP ) @dee ambagan: You need to correctly understand how works the hack you use to try getting your animation centered to get it working as expected ;) The way you use in your code move the top left corner of your animated element to middle of viewport, and translate it from its initial position by half of its own width and height. But you do that inside your @keyframes definitions, so it's not efficient... don't care of why it's not working, it will work if you remove that from your animation steps definition, and put it into the element css rules : https://code.sololearn.com/WHTPTQkPM6rx/?ref=app However, this hack is not a good one, and you have two other way to center your animation ;) + You could use table behaviour, which cells can handle vertical-alignement... but you need to use margin:auto; on your animated element for horizontal centering, and it require to declare at least two parents containers : one with display:table; and a second inside with display:table-cell; and vertical-align:middle; (and explicit width/height to force the table and cell to fit in whole viewport). However, without adding containers, you can use root container <html> for display:table; and <body> for display:table-cell; : https://code.sololearn.com/WQlj0dPXfJHW/?ref=app + But the simplest way today, is to use Flexbox : require only one container ( <body> as basic, but could be any element ) with display:flex; and only two specific css flexbox rules to get content centered both verticaly and horizontaly and explicit height to avoid the default behaviour of html elements to have auto height computed related to their content: https://code.sololearn.com/WIoJZdejKRop/?ref=app

24th Feb 2018, 8:20 PM

visph