Last updated: March 13, 2026
How to Center a Div in CSS (5 Methods)
The complete guide to centering elements in CSS. Learn Flexbox, Grid, position absolute, margin auto, and more with interactive examples.
Why Is Centering So Tricky?
Centering a div in CSS is one of the most common challenges developers face. Unlike text (which can be centered with text-align: center), block elements require different techniques depending on whether you need horizontal centering, vertical centering, or both.
Horizontal Centering
margin: 0 auto works for block elements with a defined width. For unknown widths, use Flexbox or Grid.
Vertical Centering
Vertical centering requires Flexbox, Grid, or position: absolute with transform. The parent needs a defined height.
Pro tip: For most cases, Flexbox is your best choice. It's simple, flexible, and works in all modern browsers.
Quick Reference
Use this table to quickly choose the right centering method for your situation.
| Method | Horizontal | Vertical | Needs Dimensions? | Browser Support |
|---|---|---|---|---|
| FlexboxBest | Yes | Yes | No | 99%+ |
| Grid | Yes | Yes | No | 97%+ |
| Absolute | Yes | Yes | No | 99%+ |
| Margin Auto | Yes | No | Yes | 100% |
| Text-align | Yes | No | No | 100% |
FlexboxBest
Grid
Absolute
Margin Auto
Text-align
Flexbox (Recommended)
RecommendedThe most versatile and widely-used method. Works in all modern browsers and handles both horizontal and vertical centering with minimal code.
Live Preview
CSS Code
Pros
- +Works without knowing child dimensions
- +Centers both horizontally and vertically
- +Easy to understand and remember
- +Excellent browser support (99%+)
- +Can center multiple items with gap
Cons
- -Container needs a defined height for vertical centering
- -Affects all direct children (may need wrapper)
When to Use
- *Centering content in a full-page hero section
- *Centering modal dialogs
- *Creating centered navigation items
- *Any situation where you need both axes centered
CSS Grid
The most concise method using place-items. Perfect for simple centering with just two lines of CSS.
Live Preview
CSS Code
Pros
- +Shortest code (place-items: center)
- +Works without knowing child dimensions
- +Centers both horizontally and vertically
- +Great for page layouts
Cons
- -Slightly less browser support than Flexbox
- -Container needs a defined height for vertical centering
- -Overkill if you only need horizontal centering
When to Use
- *When you want the shortest possible code
- *When building a grid-based layout
- *Centering a single item in a container
- *Creating centered card layouts
Position Absolute + Transform
A classic technique that removes the element from document flow. Useful when you need the centered element to overlap other content.
Live Preview
CSS Code
Pros
- +Works without knowing child dimensions
- +Element can overlap siblings
- +Excellent browser support
- +Doesn't affect other elements' layout
Cons
- -Removes element from document flow
- -Parent must have position: relative
- -More verbose than Flexbox/Grid
- -Can cause z-index issues
When to Use
- *Centering overlays and modals
- *Positioning tooltips
- *When element needs to overlap other content
- *Legacy browser support requirements
Margin Auto
The simplest method for horizontal centering. Just set a width and margin: auto. Note: this only centers horizontally, not vertically.
Live Preview
CSS Code
Pros
- +Simplest horizontal centering method
- +100% browser support
- +No container styles needed
- +Works with block elements
Cons
- -Only centers horizontally
- -Requires a defined width
- -Doesn't work for inline elements
- -No vertical centering without extra work
When to Use
- *Centering a container with max-width
- *Centering images or cards horizontally
- *When you only need horizontal centering
- *Centering a page wrapper
Text-align + Inline-block
An older technique using text-align: center on the parent and display: inline-block on the child. Horizontal only.
Live Preview
CSS Code
Pros
- +100% browser support
- +Works without knowing child dimensions
- +Simple to understand
- +Can center multiple inline items
Cons
- -Only centers horizontally
- -text-align inherits to child content
- -Changes element's display type
- -Considered legacy approach
When to Use
- *Centering inline elements like buttons
- *Centering multiple items horizontally
- *When supporting very old browsers
- *Quick horizontal centering without Flexbox
Pro Tips for Centering
1. Use Flexbox as Your Default
Unless you have a specific reason not to, Flexbox should be your go-to centering method. It's flexible, easy to understand, and handles most centering scenarios.
/* Quick centering shortcut */
.center-me {
display: flex;
justify-content: center;
align-items: center;
}2. Remember the Height Requirement
For vertical centering, the parent container must have a defined height. Without it, there's no reference for what "center" means vertically.
/* Common heights for centering */
.full-page { height: 100vh; }
.full-parent { height: 100%; }
.fixed-height { height: 400px; }3. margin: auto in Flexbox
Inside a Flexbox container, margin: auto works for both horizontal AND vertical centering. This is great for centering a single item.
.container { display: flex; }
.centered { margin: auto; }
/* Centers both ways! */4. Grid's place-items Shorthand
place-items: center is a shorthand for both align-items and justify-items. It's the shortest way to center with CSS Grid.
.container {
display: grid;
place-items: center;
/* That's it! */
}Frequently Asked Questions
The easiest and most recommended way to center a div both horizontally and vertically is using Flexbox. Just add display: flex; justify-content: center; align-items: center; to the parent container. For horizontal-only centering, margin: 0 auto; with a defined width is the simplest approach.
Use Flexbox or CSS Grid. For Flexbox: set the parent to display: flex; justify-content: center; align-items: center;. For Grid: use display: grid; place-items: center;. Both methods require the parent to have a defined height (like height: 100vh for full viewport).
margin: auto only works for horizontal centering on block elements because vertical margins auto-compute to 0 in normal document flow. However, margin: auto DOES work for vertical centering inside a Flexbox or Grid container, because these layouts change how auto margins are calculated.
Flexbox is the best choice for responsive design. It centers content regardless of the element's size and adjusts automatically as the viewport changes. Unlike position: absolute with fixed values, Flexbox doesn't require media queries to handle different screen sizes.
Use Flexbox (display: flex; justify-content: center; align-items: center;), CSS Grid (display: grid; place-items: center;), or position: absolute with transform (top: 50%; left: 50%; transform: translate(-50%, -50%);). All three methods center elements regardless of their size.
More CSS Tutorials
Copy CSS from Website
Extract styles with 2 clicks
Center a Div (Tailwind)
Utility classes for centering
Convert CSS to Tailwind
CSS to utility classes
Glassmorphism Effect
Frosted glass UI style
Neumorphism Button
Soft UI button design
Responsive Navbar
Mobile-friendly navigation
Sticky Header
Fixed navigation on scroll
CSS Pagination
Page navigation styles
CSS Accordion
Expandable content sections
Dropdown Menu
Hover and click dropdowns
CSS Modal
Popup dialog boxes
Toast Notifications
Animated alert messages
Hamburger Menu
Animated menu icon
Animate Gradients
Moving gradient backgrounds
Skeleton Loader
Loading placeholder UI
Element Screenshot
Capture any element as image
Pick Color from Website
Eyedropper tool comparison
Identify Fonts
Find fonts on any website
Download All Images
Bulk save images from any site
Measure Elements
Page ruler and measurements
Extract Colors from Website
Get any color palette instantly
Dark Mode Toggle
CSS variables and localStorage
Responsive Grid
CSS Grid auto-fit and minmax
Center Text in CSS
text-align, Flexbox, and Grid
Make Text Bold
font-weight values explained
Add Shadow in CSS
box-shadow, text-shadow, drop-shadow
Round Corners in CSS
border-radius and pill shapes
Style File Input
Custom upload buttons