Search code examples
htmlcsstransformtranslate

Vertical aligning doesn't work on first page load

I'm trying to vertically center a div using 

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

however, I've noticed that on first page load, it doesn't work well. The div moves up to the top of the page. On refresh, everything works properly and the div is vertically centered. What can I do to solve this?

Solution

  • To vertically center content of div you can use flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-7

    display: flex;
align-items: center;