Prefácio: No desenvolvimento diário do front end, geralmente o domínio de três ou cinco soluções é suficiente para resolver a maioria das necessidades de centragem vertical e horizontal. Portanto, este artigo não é usado para lidar com requisitos de trabalho e espero que, jogando tijolos e atraindo jade, eu possa explorar a profundidade do CSS com todos.
Aqui estão algumas maneiras que eu conheço:
1. Elementos em nível de bloco
1. Posicionamento + margem: automático
<div class="box">你好，世界。</div>
<style type="text/css">
.box {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
Nota: Compatível com ie7. A largura e a altura da caixa precisam ser definidas, caso contrário, a caixa preencherá todo o elemento pai ou corpo.
2. Posicionamento + margem negativa
<div class="box">你好，世界。</div>
<style type="text/css">
.box {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
Nota: Compatível com ie7. A largura e a altura fixas da caixa são necessárias para calcular a margem.
3. Posicionamento + tradução
<div class="box">你好，世界。</div>
<style type="text/css">
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
Nota: compatibilidade com ie10. Não há necessidade de prestar atenção à largura e altura da caixa, pode ser adaptável.
4. Posicionamento + cálculo
<div class="box">你好，世界。</div>
<style type="text/css">
.box {
width: 100px;
height: 100px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
</style>
Nota: compatibilidade com ie9. A largura e a altura fixas da caixa são necessárias para calcular calc.
5、flexível
<div class="parent">
<div class="box">你好，世界。</div>
</div>
<style type="text/css">
.parent {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
</style>
Nota: compatibilidade com ie11. O elemento pai precisa ser adicionado. Não há necessidade de prestar atenção à largura e altura da caixa, pode ser adaptável. (Quando a largura da caixa excede o pai, é necessário lidar com o colapso do conteúdo da caixa.)
2. Elementos embutidos
1、alinhamento de texto + alinhamento vertical
<div class="parent">
<div class="box">你好，世界。</div>
<div class="after"></div>
</div>
<style type="text/css">
.parent {
height: 100vh;
text-align: center;
}
.after{
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
vertical-align: middle;
}
.box{
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
</style>
Nota: compatibilidade com ie4. Confie em elementos irmãos ou pseudo-elementos (pseudo-elementos são compatíveis até ie9). Tanto a mesa quanto a mesa são a antiga magia da centralização vertical e horizontal dos elementos no nível do bloco.
2、alinhamento de texto + altura da linha
<div class="parent">
<span class="box">你好，世界。</span>
</div>
<style type="text/css">
.parent {
height: 100vh;
line-height: 100vh;
text-align: center;
}
</style>
Nota: compatibilidade com ie4. Requer a altura do elemento pai, válido apenas para elementos de bloco inline ou inline.
3. Elementos de formulário
1、Tabela + alinhamento de texto
<div class="parent">
<span class="box">你好，世界。</span>
</div>
<style type="text/css">
.parent {
display: table;
width: 100vh;
height: 100vh;
}
.box{
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
Nota: compatibilidade com ie8.
2、Tabela + alinhamento de texto
<Table>
<tr>
<td>你好，世界</td>
</tr>
</Table>
<style type="text/css">
Table {
width: 100vh;
height: 100vh;
text-align: center;
}
</style>
Nota: compatibilidade com ie3. Magia antiga! ! !