Well If you use Bootstrap or make a Website from scratch a good understanding of CSS is needed to debug your UI

One of the most commonly used CSS features is to center a div either horizontally, vertically, or both.

Before reading if I use CSS: use the text in CSS and Bootstrap: use in bootstrap class

And there are many ways to do that either by using flex-box or position attribute...

To center a div or any text related content in a tag, one can easily use

CSS: text-align: center;

Bootstrap: text-center

Now the second and the most used way is to use flex-box i.e.

CSS: display:flex;
justify-content: center;

Bootstrap: d-flex justify-content-between

This will center the div horizontally, if you want to center it vertically also you can add padding or use line-height property or simply add align-items: center

To center a div via position absolute use:

Set the position property of the parent element to relative.

Then set the child's position property to absolute, top to 50%, and left to 50%. This just centers the top left corner of the child element vertically and horizontally.

To truly center the child element, apply a negative top margin set to half the child element's height, and a negative left margin set to half the child element's width:

width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;

To Center a Div Vertically and Horizontally with Transform and Translate:

Use this method to center an element vertically and horizontally if you don't know its exact dimensions and can't use Flexbox.

First, set the position property of the parent element to relative.

Next, set the child element's position property to absolute, top to 50%, and left to 50%.

Finally, use transform: translate(-50%, -50%) to truly center the child element:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

And there are many more ways to center a div but there were the best

My GitHub Profile - AnmolVerma404

My Twitter - @AnmolVe97231707

My LinkedIn Profile - Anmol Verma