CSS: How to Center a Div Horizontally and Vertically

/* Flexbox approach */
.center-div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Full viewport height */
}

/* Grid approach */
.center-div-grid {
    display: grid;
    place-items: center;
    height: 100vh;
}