Alinhamento ao centro de blocos HTML sem largura definida

Enquanto o alinhamento centrado de um bloco, para o qual sabemos a sua largura, é relativamente simples via CSS com margens laterais definidas automaticamente (exemplo: margin-left: auto; margin-right: auto), já o mesmo alinhamento num bloco com largura variável requer um pequeno truque de CSS e HTML.

Então, como alinhar qualquer bloco ao centro?

HTML:

<div class="centered-block">
  <div class="outer-block">
    <div class="inner-block">
      <!-- bloco(s) a alinhar ao centro -->
    </div>
  </div>
  <div class="clear"></div>
</div>

CSS:

.outer-block, .inner-block {
  float: right;
  position: relative;
}
.outer-block {
  right: 50%;
}
.inner-block {
  right: -50%;
}
.clear {
  clear: both;
}

Exemplo:

Bloco DIV com width:auto para reset de largura
alinhado ao centro.