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.
CSS Alignments and Layers needs more than a syntax memory trick. The important idea is to understand text alignment, flex/grid alignment, stacking context, z-index, positioned elements, and layer debugging in the exact situation where the page topic appears, then prove the behavior with a small working example and one edge case.
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 - 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; }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 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;
}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.
.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;
}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.
.toolbar {
display: flex;
align-items: center;
justify-content: space-between;
}
.dropdown {
position: absolute;
z-index: 20;
}Trying vertical-align: middle on a normal block div.
Use flexbox or grid for block-level vertical centering.
Using z-index without setting a positioning context where required.
Use position: relative, absolute, fixed, or sticky when the element needs z-index layering.
Centering content by guessing fixed margins.
Use layout tools such as place-items, justify-content, align-items, or margin-inline: auto.
Increasing z-index again and again while ignoring the parent stacking context.
Inspect position, transform, opacity, and parent contexts to find why the layer is trapped.
Because vertical-align applies to inline, inline-block, and table-cell contexts, not normal block layout.
Grid is shortest for centering one item in both directions. Flexbox is better when you are arranging multiple items in a row or column.
The element may not be positioned, or it may be inside a parent stacking context that limits how it layers against outside elements.
No. Use a small planned scale so future layers remain understandable.
The element may not be positioned, or it may be inside a stacking context that cannot rise above a sibling context.
Explore 500+ free tutorials across 20+ languages and frameworks.