CSS Alignments Layers z index Centering

Vertical Alignment

Alignment decides where content sits inside a box; layering decides what appears above or below other content. These two topics often meet in real interfaces such as centered modals, dropdown menus, tooltips, sticky headers, and floating buttons.

Modern CSS gives you several alignment tools, but they do not all work on the same type of element. vertical-align is for inline and table-cell alignment, while flexbox and grid are usually the best choices for centering blocks and full components.

Separate alignment from stacking: Flexbox and Grid position items, while stacking contexts and paint order determine which layer appears in front.

The vertical-align property aligns inline or table-cell elements vertically. It does not work on block elements - use Flexbox or Grid for block-level vertical centering.

If vertical-align seems broken, first check the display type. A div with display: block will ignore vertical-align, but an inline-block icon beside text can align correctly with middle, text-bottom, or baseline.

vertical-align and Centering Techniques

/* vertical-align - for inline/inline-block/table-cell */
img { vertical-align: middle; }  /* align image with text */
.icon { vertical-align: text-bottom; }

/* Values: baseline | top | middle | bottom | text-top | text-bottom | sub | super | px/% */

/* Centering in table cells */
td { vertical-align: middle; text-align: center; }

/* ===== CENTERING TECHNIQUES ===== */

/* 1. Flexbox - best modern approach */
.center-flex {
    display: flex;
    justify-content: center;  /* horizontal */
    align-items: center;      /* vertical */
    min-height: 200px;
}

/* 2. Grid */
.center-grid {
    display: grid;
    place-items: center;  /* shorthand for align+justify */
    min-height: 200px;
}

/* 3. Absolute + transform */
.center-absolute {
    position: relative;
}
.center-absolute .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 4. Margin auto (horizontal only for block) */
.center-margin {
    width: 300px;
    margin: 0 auto;
}

/* 5. text-align (inline content) */
.center-text { text-align: center; }

z-index and Stacking Context

The z-index property controls the stacking order of positioned elements. Higher values appear on top. A stacking context is a group of elements that are stacked together - z-index only works within the same stacking context.

When a layer refuses to appear on top, the fix is not always a larger z-index. A parent may have created a stacking context, trapping the child within that parent layer.

z-index and Stacking Context - CSS Example

/* z-index only works on positioned elements */
/* (position: relative | absolute | fixed | sticky) */

/* Common z-index scale */
:root {
    --z-below:   -1;
    --z-base:     0;
    --z-raised:   10;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;
    --z-tooltip:  600;
}

.dropdown { position: absolute; z-index: var(--z-dropdown); }
.navbar   { position: sticky;   z-index: var(--z-sticky); }
.overlay  { position: fixed;    z-index: var(--z-overlay); }
.modal    { position: fixed;    z-index: var(--z-modal); }
.tooltip  { position: absolute; z-index: var(--z-tooltip); }

/* Stacking context - created by: */
/* - position + z-index (not auto) */
/* - opacity < 1 */
/* - transform, filter, will-change */
/* - isolation: isolate */

/* isolation: isolate - create stacking context without side effects */
.card {
    isolation: isolate;  /* z-index inside won't affect outside */
}

/* Negative z-index - behind parent */
.background-decoration {
    position: absolute;
    z-index: -1;
}

Choosing an Alignment Method

Use the alignment method that matches the layout model. For one item centered both ways, grid with place-items is beautifully short. For rows of items with spacing and wrapping, flexbox is usually clearer. For text or inline icons, text-align and vertical-align still have a place.

Use display: grid; place-items: center for simple two-axis centering.
Use flexbox when children form a row or column with distributed space.
Use margin-inline: auto to center a block with a known width.
Use text-align: center for inline text, links, and inline icons.

Three centering choices for different jobs

.modal-shell {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.article {
    width: min(100% - 2rem, 720px);
    margin-inline: auto;
}

Aligning content while controlling visual layers

CSS alignment and layering solve different layout problems that often meet in real interfaces. Alignment decides where content sits inside a box or layout system. Layering decides which element appears above another when elements overlap.

Flexbox and Grid alignment use properties such as align-items, justify-content, align-self, and place-items. Layering depends on positioning, z-index, and stacking contexts. If z-index seems broken, the issue is often that the element is not positioned or is trapped inside a different stacking context.

Use flex alignment for one-dimensional rows or columns.
Use grid alignment for two-dimensional layout areas.
Use z-index only on positioned or stacking-context-aware elements.
Check parent stacking contexts before raising z-index values.

Toolbar alignment with a layered dropdown

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dropdown {
    position: absolute;
    z-index: 20;
}

Before you move on