CSS Centering

Outdated: Table cell centering

Requires another wrapper if the table-cell wrapper needs to be centered too. Table cell needs explicit dimensions.

<div class="wrapper">
  <div class="table-cell">
    <div class="red-box unknown-dimensions"></div>
  </div>
</div>

.table-cell {
  width: 400px;
  height: 400px;
  display: table-cell;
  vertical-align: middle
}

.table-cell .red-box {
  margin: auto;
}

Outdated: Absolute position with negative margin

Centered child dimensions need to be known.

<div class="wrapper">
  <div class="red-box absolute known-dimensions"></div>
</div>

.wrapper {
  position: relative;
}

.absolute {
  position: absolute;
  top: 50%;
  left: 50%;
}

.known-dimensions {
  width: 100px;
  height: 100px;
}

.absolute.known-dimensions {
  margin-top: -50px;
  margin-left: -50px;
}

Absolute position

Useful for supporting IE 9-11 and when wrapping element can't be flex or inline-flex for some reason. Can be used on multiple children (they overlap).

<div class="wrapper">
  <div class="red-box absolute unknown-dimensions"></div>
</div>

With styles above.

.absolute.unknown-dimensions {
  transform: translate(-50%, -50%);
}

Flexbox centering

<div class="wrapper flex">
  <div class="red-box unknown-dimensions"></div>
</div>

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