How to center horizontally one div within another?

Question

How can I center a horizontal div that is inside another div using only CSS?

In this case, we can assume that div external outer has a width of 100%.

<div id="outer">  
  <div id="inner">Este é o elemento interno.</div>
</div>

Answer 1

There are several ways. These methods are divided into "defined width" and "variable width" because it depends on your need for implementation.

Some are semantically more recommended, but still do not work in almost any browser, others already exist for a long time and continue to be used because they have superior compatibility.

Defined Width

There are three popular methods to do this, are they:

Automatic Margin

#inner {
  margin: 0 auto;
  width: 50%; /* Altere para o valor da largura desejada. */
}

What we did here was to inform the value auto for the properties of margin-left and margin-right which will automatically calculate the remaining space difference and magically center your element horizontally. It is important to remember that the same rule does not apply to center an object vertically.

Internet Explorer 6: This version of Internet Explorer requires addition of property text-align: center; in this code.

Internet Explorer 8: If you have compatibility issues with Internet Explorer 8, it is better to add the property display: table; in this code.

Absolute Position

#outer {
  position: relative;
  width: 100%;
}

#inner {
  left: 50%;
  margin-left: -100px; /* A metade de sua largura. */
  position: absolute;
  width: 200px; /* O valor que você desejar. */
}

Although using negative margin and absolute position, this is the most compatible method that exists.

Heed: take care that the use of position: absolute; does not compromise the integrity of your layout.

Flexible Box Layout Module

Although more recommended, this method is still being disseminated and remains as an experimental resource for browsers, for this reason it is still too unstable to be used.

#outer {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

#inner {
  width: 200px; /* Ou a que você quiser. */
}

Variable Width

There are two ways to position with variable widths, the most compatible for this purpose is with the use of inline-block.

inline-block

#outer {
  text-align: center;
  width: 100%;
}

#inner {
  display: inline-block;
}

What will cause the element #inner centralized is the presence of the property text-align: center; in the #outer. But it’s important to note that our friend Internet Explorer 7 and inferior do not support the property display: inline-block;.

CSS Transforms

However, if you’re only concerned about browsers that already support CSS3, you can do this more elegantly and simply.

#outer {
  position: relative;
  width: 100%;
}

#inner {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

That too is used for vertical positioning. :)

Answer 2

I use to:

.pai{width: 100%}
.filho{width: 960px; margin: 0 auto;}

The . father is 100% if there is any image that occupies 100% of the screen, the . child is at 960px to stay aligned on 1024px monitors, so will not create horizontal scroll and have to use (overflow-x: Hidden).

If you use the code I mentioned above, you will have a div centralized. If by chance your div . father has a background image, when scrolling it will decrease by aligning to the left, I advise you to do the following:

.pai img {background-image: url('../images/teste;jpg'); background-repeat: no-repeat; background-position: center top};

With this, your image will always be aligned in the center and at the top. : D

Answer 3

We can use the famous unorthodox method :

#outer { width: 100%;}
#inner { width: 1000px; left: 50%; margin-left: -500px;}

Assuming your div Inner will be 1000px wide but you can also adjust to any size by always putting half into the margin-left.