center a <div>

----flexbox を使う
html

中央に配置

css
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.child {
background: red;
padding: 20px;
}

---------position と transform を使う

中央に配置

css

.parent {
position: relative;
height: 100vh;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: green;
padding: 20px;
}

grid を使う

中央に配置

css

.parent {
display: grid;
place-items: center;
}
.child {
background: green;
padding: 20px;
}