Twitter LogoFacebook Logo
How to Center Anything in HTML
Learn how to center anything in HTML
By: King

This is how to center anything in HTML

1. Create a container

<div>


</div>

2. Add the element you want to center inside the container. If you have a group of elements, wrap the contents with div.

<div>

   <div>
      <h1>Hello</h1>
   </div>

</div>

3. Set with width and height of the container.

<div
   style="
        width: 100%;
        height: 100%;
   "
>

   <div>
      <h1>Hello</h1>
   </div>

</div>

4. Then set the display to flex.

style="
        width: 100%;
        height: 100%;
        display: flex;
   "

5. Set align-items: center to center with items vertically

style="
        ...
        display: flex;
        align-items: center;
   "

6. Lastly, set justify-content: center to center the items horizontally.

style="
        display: flex;
        align-items: center;
        justify-content: center;
   "


Sign In