“How do I center a div” has been asked so many times it’s a running joke in web development — but the honest answer has actually changed for the better as CSS gained better layout tools.
/* Flexbox: the modern default for centering */
.center-flex {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Grid: arguably even simpler for a single centered child */
.center-grid {
display: grid;
place-items: center;
min-height: 100vh;
}
/* Absolute positioning + transform: for centering within a relatively positioned parent */
.center-absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Text-only: the old reliable */
.center-text {
text-align: center;
}
display: grid; place-items: center; is arguably the shortest, cleanest way to center a single child element today — two lines replacing what used to take a genuinely awkward combination of positioning and negative margins.