Center with table-cell (legacy)

Quick implementation

/* Outer wrapper acts as a table row */
.table-center-outer {
  display: table;
  width: 100%;
  min-height: 12rem;
}

/* Inner wrapper acts as a table cell */
.table-center-cell {
  display: table-cell;
  vertical-align: middle; /* centers content vertically */
  text-align: center;     /* centers inline content horizontally */
}

/* The centered element itself */
.table-center-item {
  display: inline-block; /* respects text-align: center on the cell */
}

Prompt this to your LLM

Includes role, constraints, email-client compatibility context, and edge cases to handle.

You are a senior frontend engineer explaining legacy CSS centering patterns.

Goal: Recreate the table-cell vertical centering technique using
display: table on the outer element and display: table-cell with
vertical-align: middle on the inner element — primarily for use in
HTML email templates that need to support older email clients like
Outlook desktop versions that do not support flexbox or grid.

Technical constraints:
- The outer container uses display: table and width: 100% so the table
  layout algorithm can compute column sizing correctly.
- The inner container uses display: table-cell; vertical-align: middle;
  text-align: center to center its content both vertically and
  horizontally within the available space.
- The element to be centered should be display: inline-block so it
  responds correctly to text-align: center on the parent table cell.
- For actual HTML email, prefer real <table>, <tr>, and <td> elements
  over CSS display: table values, as many email clients ignore CSS
  display overrides on non-table elements.
- Use oklch() for any color values — no hex or rgba.
- No JavaScript required.

Email client compatibility notes:
- Outlook desktop (2007–2019) uses Word's HTML rendering engine and
  ignores display: flex and display: grid. Use real table markup for
  those clients.
- Avoid percentage-based padding on <td> elements in email — use fixed
  pixel values for consistent rendering in Outlook.
- Apply align="center" and valign="middle" HTML attributes on <td>
  for maximum compatibility across email clients that strip CSS.

Edge cases to handle:
- If the outer element has no explicit width and sits inside a flex or
  grid container, display: table may collapse to its content width.
  Set width: 100% or an explicit fixed width.
- Borders on display: table elements may render inconsistently across
  browsers. Apply borders to an outer wrapper div instead.
- When the centered item should be horizontally left-aligned rather than
  centered, remove text-align: center from the cell and set the item
  to display: block with a fixed width and margin: 0 auto.
- In right-to-left layouts, text-align: center still centers correctly
  — no change needed for RTL support with this technique.

Return CSS only (no JavaScript).

Why table-cell centering worked before flexbox

Before flexbox and grid were widely supported, developers had no direct way to vertically center block-level content inside a container of unknown height. The block formatting model only allowed margin: auto to work horizontally — there was no equivalent for the vertical axis without knowing element heights in advance.

The table-cell trick exploited the CSS table layout algorithm, which had been in browsers since the late 1990s. A table cell (display: table-cell) supports vertical-align: middle, which instructs the browser to align the cell's content at the midpoint of the cell's vertical extent. By making the outer container display: table with a height, and the inner container display: table-cell; vertical-align: middle, any content inside would be vertically centered regardless of its own height.

Horizontal centering was handled separately using text-align: center on the cell for inline and inline-block content. Together, these two axes gave full two-dimensional centering without JavaScript or known element heights.

Comparing to modern flexbox and grid

Modern centering with flexbox requires a single rule on the container: display: flex; justify-content: center; align-items: center. Grid is equally concise: display: grid; place-items: center. Both center any child regardless of whether it is inline, inline-block, or block-level, and neither requires extra wrapper elements.

The table-cell approach requires two wrappers — one for display: table and one for display: table-cell — adding markup with no semantic purpose. It also has quirks: percentage padding on table cells is inconsistent across browsers, and display: table elements collapse to their content width unless width: 100% is set explicitly. Neither of these is an issue with flexbox or grid.

That said, the table-cell pattern retains one advantage: it predates flexbox by many years, making it the correct choice in HTML email where clients like older Outlook versions still use Word's rendering engine and may partially support CSS table display values in certain contexts.

Email client compatibility

The primary reason to use the table-cell centering pattern today is HTML email. Email clients have notoriously inconsistent CSS support. Outlook desktop versions (2007–2019) use Microsoft Word's layout engine, which ignores display: flex and display: grid entirely. For these clients, table-based layout — using real <table>, <tr>, and <td> HTML elements — is still the most reliable centering approach.

When writing HTML email, use actual table markup rather than CSS display: table values. Email clients often strip or override display properties on non-table elements, but reliably render structural table tags. Apply align="center" and valign="middle" HTML attributes on <td> elements for the widest compatibility, since some clients do not apply CSS properties from <style> blocks at all.

For web applications targeting IE9+ or any modern browser, prefer flexbox or grid. Reserve the table-cell pattern for email templates and legacy projects where adding a layout shim is not viable.

When to still use it

In modern web development, there are very few reasons to reach for display: table-cell centering. Flexbox support extends back to IE11 and is fully supported in every browser in active use. Grid is supported in all modern browsers and in IE11 with the older -ms- prefixed syntax for basic cases.

The table-cell centering pattern remains worth knowing for three scenarios: first, HTML email templates where Outlook compatibility is required and real table markup must be used; second, maintaining legacy codebases that predate flexbox adoption where a full layout rewrite is not on the roadmap; third, educational contexts, where understanding the technique builds intuition for the CSS table layout model that underpins how browsers handle HTML tables to this day.

If you encounter this pattern in existing code, it is safe to leave in place — browsers will continue to support CSS table display values indefinitely. For new code, always prefer flexbox or grid for any centering task on the web.