Dany Paredes
Dany Paredes | Javascript / Web

Dany Paredes | Javascript / Web

How to center elements using the box model

How to center elements using the box model

Dany Paredes's photo
Dany Paredes
·Aug 24, 2020·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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 the Pen center element with box model by Dany Paredes (@danywalls) on CodePen.

Photo by Thought Catalog on Unsplash

 
Share this