Centering div that is wider than its parent without setting negative left margin

Question

I have a div inside a div.

The div inside is wider than its parent so the normal procedure

margin-left: auto;
margin-right: auto;

produces an inner div where the left edge of the child aligns with the left edge of the parent.

When people answers this question, they uses to go for the negative left margin approach. Is there a cleaner solution?

Answer 1

You can use flexbox:

.outer {
  display: flex; /* Magic begins */
  justify-content: center; /* Center contents */
  width: 400px;
  height: 400px;
  background: beige;
  margin: 0 auto;
}
.inner {
  flex-shrink: 0; /* Don't shrink it even if it's too wide */
  width: 600px;
  height: 200px;
  background: pink;
}

<div class="outer">
  <div class="inner"></div>
</div>

Answer 2

I worked out an easy way for absolute elements using a transform.

left: 50%;
transform: translateX(-50%);

Will center it if wider than parent.