How to center elements using the box model

A common task for web development is center elements. We can center the elements horizontally and vertically.

Center horizontal

Center horizontally is so accessible. Our element needs to have a width size. If not, our element will take all space possible. Set the margin to 0 auto. The element will take the same amount of space between left and right.

margin: 0 auto;

Center Vertical

When we want center vertical, using box-model, we need an extra element as a container. With full width, the aspect inside should have height, set the container with position absolute and take away 50% from top and using negative margin with the half value of the element.

{
  position: absolute;
  top: 50%;
  margin-top: half- height;
}

Example

See CodePen Example

Photo by Thought Catalog on Unsplash