[Frontend] 7 maneiras de centralizar CSS verticalmente

Artigo anterior: [Front End] 6 métodos de centralização horizontal de CSS - Karshey's Blog - CSDN Blog

Existem muitas peças semelhantes.

altura da linha

• Aplica-se a elementos embutidos em uma única linha
• Defina a altura da linha igual à altura

Posicionamento absoluto + margem: automático

• paternidade
• superior, esquerda, direita, inferior são todos 0
• margem: automático

flexionar

• display:flex
• align-content:center

Posicionamento absoluto + margem: valor negativo

• paternidade
• Elemento filho top:50%: A borda superior é centralizada verticalmente no elemento pai
• margin-top: metade da altura do elemento filho (número negativo): move o meio do elemento filho para o centro do elemento pai

posicionamento+transformação

• elemento pai: posicionamento relativo
• Elementos filhos: o posicionamento relativo/absoluto está OK
• elemento filho top:50%, borda esquerda até o meio do elemento pai
• Elemento filho transform: translateY(-50%);, mova metade dele para a esquerda, para que seu centro fique alinhado com o centro do elemento pai
• Não há necessidade de saber a altura do elemento filho

alinhamento vertical: meio

A propriedade vertical-align define o alinhamento vertical de um elemento. Esta propriedade define o alinhamento vertical da linha de base de um elemento embutido em relação à linha de base da linha na qual o elemento reside.

Portanto, se eu quiser que a caixa seja centralizada verticalmente no wrapper, posso adicionar uma tag div vazia dentro do wrapper div , definir sua altura como 100%, definir sua largura como 0 , depois defini-la vertical-align:middlee dar um vertical-align:middleestilo à caixa , então a caixa pode ser centralizada verticalmente dentro do div.

.wrapper {
    
    
	width: 500px;
	height: 500px;
	background-color: pink;
}

.box {
    
    
	width: 100px;
	height: 100px;
	background-color: deepskyblue;

	display: inline-block;
	vertical-align: middle;
}

.help {
    
    
	width: 0;
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}

<div class="wrapper">
	<div class="box"></div>
	<div class="help"></div>
</div>

Use vertical-align:middle para centralizar verticalmente - Short Book (jianshu.com)

exibição: célula-tabela

• A configuração do elemento para ser centralizado verticalmente display:table-cellevertical-align:middle
• Por padrão, imagens, botões, texto e células podem usar a propriedade vertical-align
• Implementar centralização vertical de linhas de texto únicas ou múltiplas

body {
    
    
	background: #ccc;
}

p {
    
    
	display: table-cell;
	vertical-align: middle;
	background-color: pink;
	width: 500px;
	height: 200px;
}

<div>
	<p>
		hello world <br />
		hello world <br />
		hello world <br />
		hello world
	</p>
</div>

Também pode ser adicionado display:table. Para obter detalhes, consulte: display:table-cell realiza centralização horizontal e vertical - soldados front-end - blog garden (cnblogs.com)

display:table e display:table-cell alcançam centralização vertical de texto de linha única e multilinha - Blog do programador Like Literature - Blog CSDN

mapeamento da mente

Sete métodos de centralização vertical em CSS - Zhihu (zhihu.com)

Alinhamento vertical de aprendizagem front-end (alinhamento vertical)_Alinhamento vertical front-end_Endless Daydream233's Blog-CSDN Blog

Compreensão: antes da pseudoclasse com vertical-align:middle para realizar o princípio da centralização vertical

Use vertical-align:middle para centralizar verticalmente - Short Book (jianshu.com)

display:table e display:table-cell alcançam centralização vertical de texto de linha única e multilinha - Blog do programador Like Literature - Blog CSDN

display:table-cell atinge centralização horizontal e vertical - soldados front-end - blog garden (cnblogs.com)