CSS Alignments and Layers — z-index and Centering

Vertical Alignment

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

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 | tl-text-top | tl-text-bottom | sub | super | px/% */

/* Centering in tl-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. tl-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.

z-index and Stacking Context

/* 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;
}

Key Takeaways

Use Flexbox for one-dimensional layouts (row or column) and CSS Grid for two-dimensional layouts.
z-index only works on positioned elements (position: relative, absolute, fixed, or sticky).
Higher z-index values appear on top - but stacking context can limit this behavior.
text-align aligns inline content; margin: 0 auto centers block elements horizontally.
Flexbox justify-content controls main-axis alignment; align-items controls cross-axis alignment.
CSS Grid's place-items: center is the easiest way to center content both horizontally and vertically.

CSS Alignments and Layers — z-index and Centering

Vertical Alignment

z-index and Stacking Context

Level Up Your Css Skills

Popular Tutorials

Ready to Level Up Your Skills?