Centering with CSS: From Table-Cell to Modern Layouts

The display: table-cell Technique

The display: table-cell property mimics the behavior of table cells, which have inherent vertical alignment capabilities. When applied to a container, it forces vertical centering within the table cell context.

How display: table-cell Works

.parent {
 display: table;
 width: 100%;
 height: 300px;
}

.child {
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}

Limitations and Problems with the Table-Cell Approach

Critical issues with table-cell:

• Layout conflicts: Table-cell elements don't behave like proper block elements
• Width behavior: Table cells expand to fit content and don't respond to width constraints
• Floats ignored: Cannot use floats inside table-cell containers
• Positioning issues: Absolute positioning behaves differently
• Accessibility concerns: Using table display for non-tabular data can confuse screen readers
• Flexibility limited: Difficult to center multiple items or create complex layouts
• Modern CSS incompatibility: Doesn't work with modern layout features like Flexbox or Grid

When display: table-cell Might Still Be Appropriate

Rare scenarios where table-cell might appear:

• Supporting ancient browsers (pre-IE9, pre-Flexbox support)
• Maintaining legacy codebases without refactoring budget
• Email templates with limited CSS support

However, even in these cases, modern approaches with fallbacks are preferable. Our frontend development services can help modernize legacy CSS codebases.

Related: Learn about full-width container techniques for layouts that work with modern CSS.

Modern Solution 1: Flexbox Centering

Flexbox provides the cleanest and most widely supported solution for centering. It works for single or multiple children and centers both horizontally and vertically with just two properties. As detailed in the CSS-Tricks Flexbox Guide, flexbox has become the standard for modern layout work.

The Flexbox Approach

.parent {
 display: flex;
 justify-content: center; /* horizontal centering */
 align-items: center; /* vertical centering */
 height: 300px;
}

Centering in One Direction Only

Horizontal centering with flexbox:

.parent {
 display: flex;
 justify-content: center;
}

Vertical centering with flexbox:

.parent {
 display: flex;
 align-items: center;
}

Flexbox Centering with Multiple Children

When centering multiple items, all children are centered as a group. Use the gap property for spacing between items:

.parent {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 1rem;
}

Common Flexbox Centering Gotchas

Common issues to avoid:

• Forgetting to set a height for the container (required for vertical centering)
• Using the wrong axis when flex-direction is changed
• Margin auto behaving differently on flex children versus block elements

Explore more flexbox techniques for advanced layouts.

Modern Solution 2: CSS Grid Centering

CSS Grid offers the most concise centering solution with just two lines of code. According to the MDN CSS Grid documentation, the place-items property is a shorthand for align-items and justify-items, making it the shortest path to perfect centering.

The Grid Approach: place-items

.parent {
 display: grid;
 place-items: center;
 height: 300px;
}

The Grid Approach: place-content

For centering grid tracks (useful when you have explicit columns/rows):

.parent {
 display: grid;
 place-content: center;
 height: 300px;
}

Difference between place-items and place-content:

• place-items: Centers items within their grid cells
• place-content: Centers the entire grid within the container

Grid Centering for Multiple Items

When using grid for centering multiple items:

• Items are centered together as a group
• Use justify-content and align-content for track distribution
• Consider grid-auto-flow for item placement

When Grid Is Preferable Over Flexbox

Choose Grid when:

• Working with two-dimensional layouts
• Need precise control over both axes simultaneously
• Creating component layouts with fixed tracks
• Centering needs to work with other grid children

Choose Flexbox when:

• Working with one-dimensional layouts (single row or column)
• Need to distribute space between items
• Centering a single item or small group
• Building responsive layouts with flexible item sizing

Auto Margins: The Traditional Horizontal Solution

For horizontal centering of block elements, auto margins remain a classic and effective technique. As covered in the ModernCSS.dev centering guide, the browser calculates available space and splits it equally between left and right margins.

How Auto Margins Work for Centering

.child {
 width: 50%; /* Required - block elements are full width by default */
 margin-left: auto;
 margin-right: auto;
}

/* Modern shorthand using logical properties */
.child {
 width: 50%;
 margin-inline: auto;
}

Auto Margins in Flexbox Context

In flexbox, auto margins have expanded behavior - they can center both horizontally and vertically and take precedence over justify-content and align-items in the margin direction:

.parent {
 display: flex;
}

.child {
 margin: auto; /* Centers in both directions in flex container */
}

When working with table-based layouts, understanding how to make table cells full width can help you transition from legacy to modern CSS approaches.

Code Examples and Use Cases

Example 1: Card Component Centering

A card component with centered content using CSS Grid:

.card {
 display: grid;
 place-items: center;
 text-align: center;
 padding: 2rem;
}

.card-content {
 max-width: 400px;
}

Example 2: Full-Screen Hero Section

A hero section centered over a background using Flexbox:

.hero {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 text-align: center;
}

.hero-title {
 margin-bottom: 1rem;
}

.hero-description {
 max-width: 600px;
}

Example 3: Modal Dialog

A centered modal overlay using Grid:

.modal-overlay {
 position: fixed;
 inset: 0;
 display: grid;
 place-items: center;
 background: rgba(0, 0, 0, 0.5);
}

.modal-content {
 max-width: 90vw;
 max-height: 90vh;
 overflow: auto;
}

Example 4: Button Group Centering

Centering a group of buttons using Flexbox:

.button-group {
 display: flex;
 justify-content: center;
 gap: 1rem;
 flex-wrap: wrap;
}

Conclusion

The CSS centering landscape has evolved dramatically from the days when developers relied on table-cell hacks and transform workarounds. Today, CSS Grid's place-items: center provides the most concise solution, while Flexbox's combination of justify-content and align-items offers flexibility for more complex layouts. The display: table-cell technique, once a creative solution to a difficult problem, is now a historical curiosity rather than a recommended approach.

By understanding both the legacy techniques and modern solutions, you'll be better equipped to maintain existing codebases while building new projects with the most efficient and maintainable CSS possible. For developers looking to center content within unknown or responsive layouts, our guide on centering in the unknown covers edge cases and responsive scenarios. Need help modernizing your website's CSS? Our web development team can help you implement these techniques.

Sources

1. MDN Web Docs - Center an element - Official CSS Layout Cookbook
2. MDN Web Docs - CSS Flexbox - Official flexbox documentation
3. MDN Web Docs - CSS Grid Layout - Official grid documentation
4. CSS-Tricks - A Complete Guide to Flexbox - Comprehensive flexbox reference
5. ModernCSS.dev - The Complete Guide to Centering in CSS - Centering techniques tutorial
6. Josh W. Comeau - How To Center a Div - Interactive centering tutorial