CSS Align

CSS Align: Centering Elements Horizontally and Vertically

Aligning boxes cleanly in the center of a container used to take fragile positioning math. Today, three reliable CSS patterns cover virtually every alignment job: margin-inline: auto for fixed-width blocks, text-align for inline text, and Flexbox or Grid for horizontal and vertical centering.

Three Go-To Centering Patterns

1. Center a Block Container Horizontally: Give it a max-width and margin-inline: auto;.
2. Center Text Inside an Element: Use text-align: center;.
3. Center Anything Both Horizontally and Vertically: Turn the parent container into a Grid with display: grid; place-items: center; or Flexbox with display: flex; justify-content: center; align-items: center;.

/* 1. Centered page shell */
.container {
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
}

/* 2. Centered modal or empty-state card */
.empty-state {
    min-height: 260px;
    display: grid;
    place-items: center;
    text-align: center;
    background-color: #f8fafc;
    border-radius: 10px;
}

/* 3. Navbar with logo left and links right */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

Centering Images Cleanly

Remember that HTML img elements default to display: inline. To center a standalone image with margin-inline: auto;, first switch the image to display: block;.

Common Mistakes to Avoid

• Trying vertical-align: middle on a block div: vertical-align only applies to inline elements and table cells (td/th), not block containers. Use Flexbox align-items: center instead.
• Using position: absolute with negative margins to center modals: Hardcoded pixel offsets clip on small screens; Flexbox or Grid centering adapts automatically.
• Applying text-align: center to long paragraphs: Centered multi-line articles slow down eye tracking; keep body prose left-aligned (start).

Frequently Asked Questions

What is the shortest modern way to center a child vertically and horizontally?

Apply display: grid; place-items: center; on the parent container—two lines center any child element cleanly.

Why didn't margin: 0 auto center my div?

Either the div has no constrained width/max-width (so it already spans 100%), or it is inside a Flex column where align-self: center is needed.