caminho1:
layout flexível: eixo principal centralizado verticalmente + eixo lateral centralizado verticalmente
<estilo>
* {
preenchimento: 0;
margem: 0;
box-sizing: border-box;
}
.caixa grande {
largura: 300px;
altura: 300px;
cor de fundo: ameixa;
margem: 100px auto 0;
exibição: flexível;
justificar-conteúdo: centro;
itens de alinhamento: centro;
}
.smallBox {
largura: 200px;
altura: 200px;
cor de fundo: verde-amarelo;
}
</estilo>
<corpo>
<div class="bigBox">
<div class="smallBox"></div>
</div>
</body>
caminho2:
Pai: posicionamento relativo
Nível filho: Posicionamento absoluto, superior, inferior, esquerdo e direito 0 + margem:auto
<estilo>
* {
preenchimento: 0;
margem: 0;
box-sizing: border-box;
}
.caixa grande {
largura: 300px;
altura: 300px;
cor de fundo: ameixa;
margem: 100px auto 0;
posição: relativa;
}
.smallBox {
largura: 200px;
altura: 200px;
cor de fundo: verde-amarelo;
posição: absoluta;
margem: carro;
superior: 0;
inferior: 0;
direita: 0;
esquerda: 0;
}
</estilo>
caminho3:
Nível filho: margem superior e esquerda = 50% de (largura/altura da caixa principal - largura/altura da caixa) (precisa ser calculado)
<estilo>
* {
preenchimento: 0;
margem: 0;
box-sizing: border-box;
}
.caixa grande {
largura: 300px;
altura: 300px;
cor de fundo: ameixa;
margem: 100px auto 0;
estouro: oculto;
/* padding-top: 50px; */
}
.smallBox {
largura: 200px;
altura: 200px;
cor de fundo: verde-amarelo;
margem superior: 50px;
margem esquerda: 50px;
}
</estilo>
caminho4:
Pai: posicionamento relativo
Nível filho: posicionamento absoluto + 50% do canto superior esquerdo da caixa pai e, em seguida, retrocede 50% de sua própria largura e altura (precisa calcular)
<estilo>
* {
preenchimento: 0;
margem: 0;
box-sizing: border-box;
}
.caixa grande {
largura: 300px;
altura: 300px;
cor de fundo: ameixa;
margem: 100px auto 0;
posição: relativa;
}
.smallBox {
largura: 200px;
altura: 200px;
cor de fundo: verde-amarelo;
posição: absoluta;
superior: 50%;
esquerda: 50%;
margem superior: -100px;
margem esquerda: -100px;
}
</estilo>
caminho5:
Pai: posicionamento relativo
Nível filho: Posicionamento absoluto + 50% do canto superior esquerdo da caixa pai e, em seguida, move 50% de si mesmo nos eixos x e y
(Não há necessidade de calcular, use o deslocamento diretamente)
<estilo>
* {
preenchimento: 0;
margem: 0;
box-sizing: border-box;
}
.caixa grande {
largura: 300px;
altura: 300px;
cor de fundo: ameixa;
margem: 100px auto 0;
posição: relativa;
}
.smallBox {
largura: 200px;
altura: 200px;
cor de fundo: verde-amarelo;
posição: absoluta;
superior: 50%;
esquerda: 50%;
transform: translate(-50%, -50%);
}
</estilo>
caminho6:
Pai: exibição: tabela-célula + alinhamento da linha de base + alinhamento do centro do texto
Filho: Bloco Inline Envolvido
Observação: o atributo display:table-cell é muito semelhante à tag td e não tem significado para o valor da margem
<estilo>
* {
preenchimento: 0;
margem: 0;
box-sizing: border-box;
}
.caixa grande {
largura: 300px;
altura: 300px;
cor de fundo: ameixa;
/* margem: 100px auto 0; */
exibição: tabela-célula;
alinhamento vertical: meio;
alinhamento de texto: centro;
}
.smallBox {
largura: 200px;
altura: 200px;
cor de fundo: verde-amarelo;
exibição: bloco em linha;
}
</estilo>