36
gitpush
7y

I DID IT :D
I VERTICALLY ALIGNED A DIV IN CSS

I'm a noob in front-end development, I usually use bootstrap but now I did it in vanilla CSS inside ReactJs =D

or is it lol, I don't know, I used these:
position: "relative",
top: "50%",
transform: "translateY(-50%)"

source: https://stackoverflow.com/a/4416166

Comments
  • 18
    Read up on flexbox its the future
  • 7
  • 1
    As @Dacexi and @searchindex it's easier in CSS with flexbox or tables.
  • 12
    @Baguette "or tables" no, stop, that's fucking 2008 webdev shit. You totally shouldn't be recommending that now that css grid exist
  • 4
    @Dacexi its pre 2008 even.
  • 2
    Html Tables works but then how you solve it for responsiveness?
    Css grid its not yet very stable and not all browsers support it yet
  • 2
    @searchindex yeah but you shouldn't be using old, fading and buggy tech when the new is just around the corner.
  • 3
    @Dacexi @searchindex

    Mates, why you are diving in to details. I answered a simple and direct question , regrdless the responsive, or the said "2008" WebDev . Tables and celles can align elements verticaly as well. And i never recommanded anything. Please read to understand not to reply.
    Thank you for your UNDERSTANDING
  • 3
    @Baguette
    'Mate' i did not reply to you. Just expressed my opinion like somebody else.
    Hope YOU UNDERSTAND THAT.
  • 1
  • 2
    Guys, I mean, I haven’t tried it, but wouldn’t the easiest thing be to use @media -tags for every possible window height and just move the element with top: Xpx?
  • 1
    Display: flex on parent
    then margin auto;
  • 0
    Thank you everyone for your recommendation and yes I'm a poor guy inside a cave that wanted to give front end a go, I'm a complete noob if you know anything that can help please do share, I've always done front-end using Bootstrap, but I don't want to rely on a single framework but instead I want to be able to do it my self. All suggestions are welcomed :)
  • 0
    For future readers, how bad is using this:
    height: window.innerHeight
    I use it as a style of a div in pure html page, and it gives me the result I want, because height: 100% isn't working for some reason :\

    I also use in React but it is JS anyways.
  • 2
Add Comment