Em CSS, você tem que reclamar. Você pode usar margin: 0 auto para obter centralização horizontal, mas margin: auto 0 não pode obter centralização vertical;
A principal razão aqui é que o controle pai, ou seja, o próprio controle, não está posicionado corretamente. Olhando diretamente para o código, primeiro você precisa usar o layout relativo para o controle pai e, em seguida, usar o layout absoluto para os controles filho e usar os atributos superior e inferior, combinados com margin: auto 0;, para obter o efeito.
.container-vertical {posição: relativa; largura: 100%; altura: 200px; fundo: deepskyblue; altura do texto: 80px; alinhar: centro; fundo: amarelo; margem superior: 0; 0;}Centralizado verticalmente.png
Centralizar horizontalmente e verticalmenteCom a experiência do 5.2, podemos tentar definir as propriedades esquerda, direita, superior e inferior do controle filho como 0 e margens automáticas em todas as quatro direções. Este efeito pode ser alcançado. Os subcontroles que precisam ser anotados devem ter o atributo display: block;
Veja o código
.container-horization-vertical {posição: largura relativa: 100%; altura: 200px; fundo: deepskyblue; 80px; fundo: amarelo; altura da linha: 80px; alinhamento do texto: centro: 0; 0; inferior: 0; direita: 0; margem: automático;}Resumo: Esta solução ainda é muito boa para resolver alguns layouts de páginas não tão complexos, podendo ser adaptada a qualquer interface e quase todos os navegadores. Mas para páginas muito complexas podem ser necessárias outras soluções, mas você também pode se inspirar nessa ideia.
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.