Centering content inside a container is one of the most frequently performed tasks in CSS, and for most of the web’s history it was also one of the most frustrating. Horizontally centering a block element with margin: auto worked reliably once developers learned that the element needed an explicit width, but vertical centering required a parade of hacks that each broke under slightly different conditions. The negative margin trick required knowing the exact pixel height of the element in advance. The table-cell approach forced you to change the display model of the container and its parent. Absolute positioning with top: 50%; transform: translateY(-50%) worked for single elements but broke when the content height changed dynamically. CSS Flexbox, introduced to all major browsers around 2013 and now universally supported, solved all of these cases with a clean two-property solution that works regardless of element size, aspect ratio, or content length. The model is straightforward: make the parent container a flex container with display: flex, then use justify-content: center to center children along the main axis and align-items: center to center them on the cross axis. By default the main axis is horizontal, so both properties together produce perfect two-dimensional centering with no knowledge of the child element’s dimensions required. This approach works for a single child, multiple children displayed in a row or column, and even content whose size changes after page load via JavaScript. CSS Grid offers an even more concise solution — a single property, place-items: center, covers both axes simultaneously — but Flexbox remains the most universally understood and widely applicable centering technique for everyday layouts. Both methods are pure CSS with no JavaScript dependency and no browser-specific prefix required in 2021. The examples below cover three common centering scenarios: full-viewport centering for loading screens and hero sections, centering within a fixed-size card, and centering a modal overlay against the viewport.
Problem: You need to center a child element both vertically and horizontally inside its parent container.
Solution: Use CSS Flexbox on the parent container:
/* Center inside a full-viewport container (e.g., loading screen) */
.fullscreen-center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Center inside a fixed-size card */
.card-center {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
}
/* CSS Grid alternative — even more concise */
.grid-center {
display: grid;
place-items: center;
min-height: 100vh;
}NOTE: The parent container must have an explicit height (or min-height) for vertical centering to have any effect — a container with height: auto simply wraps its content and there is no empty space to center within. When working with WordPress themes, check that a parent wrapper is not overriding the display property with a more specific selector. For centering text within a single-line element, text-align: center plus line-height matching the container height is still the simplest approach and does not require changing the display model.