Best way to center a on a page vertically and horizontally? [duplicate]

Answer 1

Using Flex-box in my opinion:

#parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

  
Hello World!

You see there are only three CSS properties that you have to use to center the child element vertically and horizontally. display: center; Do the main part by just activating Flex-box display, justify-content: center; center the child element vertically and align-items: center; center it horizontally. To see the best result I just add some extra styles :

#parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  width: 500px;
  background: yellow;
}

#child {
  width: 100px;
  height: 100px;
  background: silver;
}

  
Hello World!

If you want to learn more about Flex-box you can visit W3Schools, MDN or CSS-Tricks for more information.