1. Os elementos em linha são centralizados verticalmente
Nota: A largura e a altura dos elementos embutidos não podem ser configurados, mas o preenchimento pode ser configurado, margin-top e margin-bottom não podem ser configurados, mas margin-left e margin-right podem ser configurados.
1. Defina padding-top e padding-bottom com o mesmo valor.
HTML
.box{
padding-top: 30px;
padding-bottom: 30px;
padding-right: 20px;
padding-left:20px;
background-color: #b9d1ee;
}
HTML
<span class="box">
使用padding-top和padding-bottom使文本垂直居中
</span>
2. O elemento pai define os valores da altura e da altura da linha como iguais.
Princípio: altura da linha = espaçamento superior + altura do texto + espaçamento inferior, e a altura do espaçamento superior e inferior são iguais. Se altura da linha = altura, o texto será centralizado verticalmente.
CSS ：
.father{
width: 1200px;
height: 300px;
line-height: 300px;
margin:20px auto;
background-color: #617e87;
padding: 30px;
text-align: center;
}
.child{
background-color: #b9d1ee;
}
HTML ：
<p class="father">
<span class="child">
父元素设置line-height和height值相同。
</span>
</p>
Em segundo lugar, o elemento de bloco é centrado verticalmente
1. Layout flexível
Defina o elemento pai:display:flex;align-items:center;
CSS
.father{
width: 1200px;
height: 300px;
margin:20px auto;
background-color: #617e87;
padding: 30px;
display: flex;
align-items:center;
}
.child{
width: 200px;
height: 200px;
background-color: #b9d1ee;
}
HTML:
<div class="father">
<div class="child">
块元素垂直居中：flex布局
</div>
</div>
2. Layout da grade:
Configurações do elemento pai: display: grid;grid-template-columns: 150px 150px ;grid-template-rows: 150px 150px;
configurações do elemento filho:align-self:center;
CSS ：
.father{
width: 1200px;
height: 300px;
margin:20px auto;
background-color: #617e87;
padding: 30px;
display: grid;
grid-template-columns: 150px 150px ;
grid-template-rows: 150px 150px;
}
.child{
width: 100px;
height: 100px;
text-align: center;
align-self:center;
}
.child:nth-child(1){
background-color: #b9d1ee;
}
.child:nth-child(2){
background-color: #95a9c4;
}
.child:nth-child(3){
background-color: #a7e99f;
}
.child:nth-child(4){
background-color: #6e9b66;
}
HTML ：
<div class="father">
<div class="child">
块元素垂直居中：grid1
</div>
<div class=" child">
块元素垂直居中：grid2
</div>
<div class=" child">
块元素垂直居中：grid3
</div>
<div class=" child">
块元素垂直居中：grid4
</div>
</div>
3. Use o posicionamento
(1) A altura do elemento filho é determinada
Posicionamento relativo dos elementos pais, posicionamento absoluto dos elementos filhos. O subelemento é fornecido top：50% ;margin-top:-（子元素高度的一半）px;como a altura superior em relação ao navio-pai, de modo que pode ser realizado na metade da altura do subelemento Salvar centralizado verticalmente.
CSS:
.father{
width: 1200px;
height: 300px;
margin:20px auto;
background-color: #617e87;
padding: 30px;
position: relative;
}
.child{
width: 1000px;
height: 100px;
position: absolute;
top: 50%;
margin-top: -50px;
background-color: paleturquoise;
}
HTML ：
<div class="father">
<div class="child">
利用定位，子元素的高度确定。
</div>
</div>
(2) A altura do elemento filho é incerta
Uso de localização margin-top：-50pxem transform: translateY(-50%);movimento ascendente do próprio elemento 50%.
CSS ：
.father{
width: 1200px;
height: 300px;
margin:20px auto;
background-color: #617e87;
padding: 30px;
position: relative;
}
.child{
width: 1000px;
position: absolute;
transform: translateY(-50%);
top: 50%;
background-color: paleturquoise;
}
HTML:
<div class="father">
<div class="child">
<p>利用定位，子元素的高度不需确定。</p>
<p>transform: translateY(-50%);</p>
</div>
</div>
(3) Determine a altura do elemento filho
Os elementos esquerdo, direito, inferior e superior dos elementos filho são todos 0, margin: auto
CSS
.father{
width: 1200px;
height: 300px;
margin:20px auto;
background-color: #617e87;
padding: 30px;
position: relative;
}
.child{
width: 1000px;
height: 100px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
background-color: paleturquoise;
}
HTML:
<div class="father">
<div class="child">
<p>利用定位，子元素的高度不需确定。</p>
<p>子元素的left、right、bottom、top都为0,margin:auto</p>
</div>
</div>
