Centralize um bloco de conteúdo quando você não sabe sua largura antecipadamente

Question

Depois de muitas tentativas e pesquisas, nunca encontrei uma maneira satisfatória de fazer isso com CSS2.

Uma maneira simples de conseguir isso é envolvê-lo em um prático <table> conforme mostrado no exemplo abaixo.Você sabe como fazer isso evitando layouts de mesa e também evitando truques peculiares?

table {
  margin: 0 auto;
}

<table>
  <tr>
    <td>test<br/>test</td>
  </tr>
</table>

---

O que eu quero saber é como fazer isso sem largura fixa e também sendo bloco.

Answer 1

@Jason, sim, <center> funciona.Bons tempos.Vou propor o seguinte, no entanto:

body {
  text-align: center;
}

.my-centered-content {
  margin: 0 auto; /* Centering */
  display: inline;
}

<div class="my-centered-content">
  <p>test</p>
  <p>test</p>
</div>

EDITAR @Santi, um elemento em nível de bloco preencherá a largura do contêiner pai, portanto será efetivamente width:100% e o texto fluirá para a esquerda, deixando você com uma marcação inútil e um elemento descentralizado.Você pode querer tentar display: inline-block;.O Firefox pode reclamar, mas está certo.Além disso, tente adicionar um border: solid red 1px; para o CSS do .my-centered-content DIV para ver o que está acontecendo enquanto você experimenta essas coisas.

Answer 2

Esta será a resposta mais idiota, mas funciona:

Use a tag obsoleta <center>.

:P

Eu disse que seria ridículo.Mas, como eu disse, funciona!

*estremecimento*

Answer 3

Acho que seu exemplo funcionaria tão bem se você usasse um <div> em vez de um <table>.A única diferença é que o texto na <table> também está centralizado.Se você quiser isso também, basta adicionar o alinhamento de texto:Centro;regra.

Outra coisa a ter em mente é que o <div> preencherá por padrão todo o espaço horizontal disponível.Coloque uma borda se não tiver certeza de onde começa e termina.

Answer 4

O seguinte funciona bem o suficiente.Note o posição, e o uso de auto

<div style="border: 1px solid black; 
            width: 300px; 
            height: 300px;">
            <div style="width: 150px; 
                        height: 150px; 
                        background-color: blue;
                        position: relative;
                        left: auto;
                        right: auto;
                        margin-right: auto;
                        margin-left: auto;">
             </div>
</div>

OBSERVAÇÃO:não tenho certeza se funciona no IE.

Answer 5

No FF3, você pode:

<div style="display: table; margin: 0px auto 0 auto;">test<br>test</div>

Isso tem a vantagem de usar qualquer elemento que faça mais sentido semântico (substitua o div por algo melhor, se apropriado), mas a desvantagem é que ele falha no IE (grr...)

Fora isso, sem definir a largura, sua melhor aposta é usar javascript para posicionar com precisão a borda esquerda.Não tenho certeza se você classificaria isso como um 'truque peculiar'.

Realmente depende do que você quer fazer, é claro.Dado o seu caso de teste simples, uma div com alinhamento de texto:centro teria exatamente o mesmo efeito.

Answer 6

#wrapper {
  width: 100%;
  border: 1px solid #333;
}
#content {
  width: 200px;
  background: #0f0;
}

<div id="wrapper" align="center">
  <div id="content" align="left"> Content Here </div>
</div>