How do I horizontally center this [duplicate]

With flexbox it is very easy to style the div horizontally and vertically centered.

To align the div vertically centered, use the property align-items: center.

Other Solutions

You can apply this CSS to the inner <div>:

Of course, you don't have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.

If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:

It will make the inner element center horizontally and it works without setting a specific width.

Working example here:

If you don't want to set a fixed width on the inner div you could do something like this:

That makes the inner div into an inline element that can be centered with text-align.

The modern box model with Flexbox

The old box model (deprecated)

display: box and its properties box-pack, box-align, box-orient, box-direction etc. have been replaced by flexbox. While they may still work, they are not recommended to be used in production.

According to your usability you may also use the box-orient, box-flex, box-direction properties.

Read more about centering the child elements

CSS Box Model Module Level 3

Box model (CSS2)

box-align on MDN

And this explains why the box model is the best approach:

Make sure the parent element is positioned, i.e., relative, fixed, absolute, or sticky.

If you don't know the width of your div, you can use transform:translateX(-50%); instead of the negative margin.

With CSS calc(), the code can get even simpler:

The principle is still the same; put the item in the middle and compensate for the width.

I've created this example to show how to vertically and horizontally align.

The code is basically this:

And it will stay in the center even when you resize your screen.

Some posters have mentioned the CSS 3 way to center using display:box.

This syntax is outdated and shouldn't be used anymore. [See also this post].

So just for completeness here is the latest way to center in CSS 3 using the Flexible Box Layout Module.

So if you have simple markup like:

...and you want to center your items within the box, here's what you need on the parent element (.box):

If you need to support older browsers which use older syntax for flexbox here's a good place to look.

If you don't want to set a fixed width and don't want the extra margin, add display: inline-block to your element.

You can use:

Centering a div of unknown height and width

Horizontally and vertically. It works with reasonably modern browsers (Firefox, Safari/WebKit, Chrome, Internet & Explorer & 10, Opera, etc.)

Tinker with it further on Codepen or on JSBin.

CSS 3's box-align property

The way I usually do it is using absolute position:

The outer div doesn't need any extra properties for this to work.

I recently had to center a "hidden" div (i.e., display:none;) that had a tabled form within it that needed to be centered on the page. I wrote the following jQuery code to display the hidden div and then update the CSS content to the automatic generated width of the table and change the margin to center it. (The display toggle is triggered by clicking on a link, but this code wasn't necessary to display.)

NOTE: I'm sharing this code, because Google brought me to this Stack Overflow solution and everything would have worked except that hidden elements don't have any width and can't be resized/centered until after they are displayed.

For Firefox and Chrome:

For Internet Explorer, Firefox, and Chrome:

The text-align: property is optional for modern browsers, but it is necessary in Internet Explorer Quirks Mode for legacy browsers support.

Use:

Another solution for this without having to set a width for one of the elements is using the CSS 3 transform attribute.

The trick is that translateX(-50%) sets the #inner element 50 percent to the left of its own width. You can use the same trick for vertical alignment.

Here's a Fiddle showing horizontal and vertical alignment.

More information is on Mozilla Developer Network.

Chris Coyier who wrote an excellent post on 'Centering in the Unknown' on his blog. It's a roundup of multiple solutions. I posted one that isn't posted in this question. It has more browser support than the Flexbox solution, and you're not using display: table; which could break other things.

I recently found an approach:

Both elements must be the same width to function correctly.

For example, see this link and the snippet below:

If you have a lot of children under a parent, so your CSS content must be like this example on fiddle.

The HTML content look likes this:

Then see this example on fiddle.

In my experience, the best way to center a box horizontally is to apply the following properties:

The container:

The content box:

Demo:

See also this Fiddle!

In my experience, the best way to center a box both vertically and horizontally is to use an additional container and apply the following properties:

The outer container:

The inner container:

The content box:

Demo:

See also this Fiddle!

This method also works just fine:

For the inner <div>, the only condition is that its height and width must not be larger than the ones of its container.

The easiest way:

Flex have more than 97% browser support coverage and might be the best way to solve these kind of problems within few lines:

If width of the content is unknown you can use the following method. Suppose we have these two elements:

Suppose the computed width of the elements are 1000 pixels and 300 pixels respectively. Proceed as follows:

Demo:

You can do something like this

This will also align the #inner vertically. If you don't want to, remove the display and vertical-align properties;

Here is what you want in the shortest way.

JSFIDDLE

You can use display: flex for your outer div and to horizontally center you have to add justify-content: center

or you can visit w3schools - CSS flex Property for more ideas.

You can just simply use Flexbox like this:

Apply Autoprefixer for all browser support:

Use transform:

With Autoprefixer:

Well, I managed to find a solution that maybe will fit all situations, but uses JavaScript:

Here's the structure:

And here's the JavaScript snippet:

If you want to use it in a responsive approach, replace $(document).ready by $(window).resize in the previous example.