Centering in CSS is stupidly convoluted and annoying with many different ways to do things.

Centering horizontally

There are multiple ways to horizontally center

display: block;
margin-left: auto;
margin-right: auto

Another

position: absolute;
left: 50%;
transform: translateX(-50%)

Another

position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

Centering horizontally and vertically (eg. a modal)

Best approach:

max-height: 100%; /* Reduce this to 90% if you want some padding */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: auto;

This is the best approach because it’ll still work if the content overflows vertically, whereas the other approaches will break in that scenario.

Flexbox approach (breaks if overflowing vertically)

display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
right: 0;
bottom: 0;

	flex justify-center items-center inset-0