This is how to center anything in HTML
How to Center Anything in HTML
Learn 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;
"
