How to center a div in CSS: every method explained (including why yours isn’t working)

At some point, you tried to center something on your website. A search bar that sat stubbornly to the left. A section that refused to land in the middle no matter what you did in the page builder. Something that was almost centered but not quite, and you couldn’t figure out why.

I have been in this exact place. I was building in Elementor, trying to center a BetterDocs search bar, and I tried everything I could think of: a fixed-width column, custom CSS, center tags, giving the element a custom CSS ID and targeting it directly. None of it worked. I sat there thinking: why the hell won’t it just center? Hours on something that felt like it should take two minutes. And when I eventually did get it centered, I couldn’t even tell you what finally worked. That’s how most fixes go. The frustration stays. The specific solution dissolves.

What makes centering in CSS harder than it looks is that there isn’t one way to do it. There are several, each designed for a different situation, and picking the wrong method for your situation is exactly why nothing seems to work. The method you reached for was probably correct in principle. It was just the wrong tool for that specific job.

This post covers every centering method, explains what each one actually does, and ends with the reasons yours might not be working even when the code looks right.

First: what exactly are you trying to center?

Before anything else, you need to know what you’re dealing with. Centering a box inside a page is a different problem from centering text inside a box, which is different again from centering one box inside another. CSS doesn’t have one universal “center this” property. It has different tools depending on which of those problems you have.

Centering horizontally means moving something to the middle of the space from left to right. This is the most common need and has the most solutions. Centering vertically means moving something to the middle of the space from top to bottom. This one stumped web designers for years before modern CSS arrived. Now it’s simple, but you have to use the right method.

Most of the time when people say they want to center something, they want both: horizontal and vertical, dead center in the available space. All of the methods below can achieve that in different ways.

Method 1: Flexbox (the one to reach for most of the time)

Flexbox is the most reliable, most versatile centering method available today. It handles both horizontal and vertical centering at once and doesn’t require you to know the size of the thing you’re centering. For most centering problems, this is the right tool.

The logic: you’re not telling the box to center itself. You’re telling the container (the thing holding the box) to center whatever is inside it.

To center horizontally only:

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

To center both horizontally and vertically:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

If you want it centered in the full height of the screen, add height: 100vh to the container. That tells the container to be as tall as the viewport, which gives the vertical centering something to work with.

Where to add this in a page builder: most page builders have alignment controls that apply these flexbox properties under the hood when you click “center.” If the builder’s alignment control isn’t centering correctly, the custom CSS panel is the place to add the code above to the section or column that contains the element, not to the element itself.

Method 2: CSS Grid (best for centering within a layout grid)

CSS Grid is a layout system built for placing things in two dimensions at once. For centering specifically, it’s remarkably concise: one line on the container centers everything inside it both horizontally and vertically.

.container {
  display: grid;
  place-items: center;
}

place-items: center is shorthand for two grid properties at once. It centers content along both axes simultaneously. Grid is particularly useful if you’re already using a grid layout and need something centered inside one of its cells.

Horizontal centering only with Grid:

.container {
  display: grid;
  justify-items: center;
}

Method 3: margin: auto (the classic, horizontal only)

This is the oldest centering method and still the right choice in specific situations. It works by telling the browser to put equal amounts of empty space on both sides of the element, pushing it to the middle.

.element {
  width: 600px;
  margin: 0 auto;
}

Two conditions must be met: the element has to be a block-level element (which most boxes are by default), and it has to have a defined width. Without a specified width, the element defaults to 100% of the container, leaving no room for margins to distribute. Nothing centers. This method only works horizontally.

Method 4: absolute positioning with transform (for floating elements)

This method is specifically for elements that need to be positioned independently of the page flow: modals, overlays, floating badges, centered pop-ups.

.container {
  position: relative;
}

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

top: 50% and left: 50% place the top-left corner of the element at the center point of the container. The transform: translate(-50%, -50%) then shifts the element back by half its own width and height, landing it exactly centered. The container must have position: relative for this to work. Without it, the absolutely positioned element positions itself relative to the page instead.

Method 5: text-align: center (for text and inline elements)

This one is specifically for centering text or inline elements within their container. It doesn’t center block elements, and it doesn’t center the container itself.

.container {
  text-align: center;
}

A common misuse: applying text-align: center to a div hoping it will center the div. It won’t. It will center the content inside the div, which sometimes looks like it worked. If the element you’re trying to center is a block-level element, text-align has no effect on its position.

Method 6: margin: auto on a flex child

When you have a flex container and want to center one specific child inside it, set the parent to display: flex, then apply margin: auto to the child. The child centers itself both horizontally and vertically within the flex container, regardless of where other children sit.

.container {
  display: flex;
  height: 100vh;
}

.element {
  margin: auto;
}

Which method to use when

Most everyday centering: Flexbox. It handles horizontal, vertical, or both, it’s responsive, it doesn’t require knowing the element’s size, and it’s the most widely supported.

Centering text or inline elements inside a container: text-align: center on the parent.

Centering a single block element horizontally: margin: 0 auto with a defined width.

Already working with a Grid layout: place-items: center on the grid container.

Floating or overlaid elements: absolute positioning with transform.

One child centered inside a flex container while others aren’t: margin: auto on the child.

How to center a div in CSS: why yours isn’t working

You used one of the methods above and it still didn’t center. Here are the actual reasons, in order of how often they occur.

You applied the property to the wrong element. Flexbox and Grid work on the container, not the element being centered. If you added display: flex; justify-content: center to the element itself instead of its parent, nothing will center.

margin: auto has no width to work with. Without a defined width on the element, margin: auto has no room to function. Add a width or max-width and the centering will work.

The container doesn’t have a defined height. Vertical centering requires the container to have height. If the container is only as tall as its content, there’s no empty space to distribute vertically. Add a height or min-height.

Something else is overriding the centering rule. This is the one that makes you question not just your CSS but your ability to Google a CSS problem. You find a fix. You apply it. It doesn’t work, not because the fix is wrong, but because it wasn’t written for your specific setup. Your theme, your page builder, your plugins, all competing with each other in ways the forum post couldn’t account for. I’ve had 12 plugins running at once and watched the right fix for a clean install do absolutely nothing on my actual site.

I knew a competition was running in the browser. I knew multiple stylesheets were fighting over what that element would look like. What I didn’t know was which one was winning, or where those stylesheets even lived. That’s the part most explanations skip: telling you what the fix is without telling you how to find which rule is overriding it on your specific site.

When you’re at that point, Loupely Lens reads the full CSS cascade for the element you click, every rule applying to it, where each came from, and which one is winning, in real human terms, so you know exactly what you’re overriding and where to put the fix.

The element has absolute positioning applied. When an element has position: absolute, margin: auto won’t center it correctly. Use the transform method in Method 4 instead.

The page builder is generating its own styles that conflict. Elementor, Divi, and most builders write inline CSS onto your elements when you adjust settings in the visual editor. Inline CSS has the highest specificity in the cascade, which means it beats nearly anything you write in a stylesheet or custom CSS panel. You’d need to change the setting in the builder itself, or use a specificity-boosting override to win against it.

When the problem isn’t on the element you’re looking at

Sometimes you’ve done everything correctly. The CSS is right, the method fits the situation, the container has height, the element has a width. And still, something’s off.

That usually means a parent container is constraining the element in a way that makes centering impossible from the element’s level. The centering you set is working. Something above it is the problem. This is the most common CSS centering failure that looks like something is broken when nothing actually is.

Knowing that the issue is above the element, not on it, changes where you look. In DevTools, click on the element that won’t center. Then click up through its parent elements one level at a time, checking each one’s computed width, margin, and display properties. The first parent that has a fixed width, a missing margin: auto, or a flex or grid property overriding child alignment is where the fix needs to go, not on the element itself.