1. Los elementos en línea están centrados verticalmente
Nota: No se puede establecer el ancho y el alto de los elementos en línea, pero se puede establecer el relleno, no se pueden establecer margin-top y margin-bottom, pero se pueden establecer margin-left y margin-right.
1. Establezca padding-top y padding-bottom en el mismo 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. El elemento padre establece que los valores de altura y altura de línea sean iguales.
Principio: altura de línea = espacio superior + altura del texto + espacio inferior, y la altura del espacio superior y el espacio inferior son iguales.Si línea-altura = altura, el texto estará centrado 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>
En segundo lugar, el elemento de bloque está centrado verticalmente
1. Diseño flexible
Establecer el elemento principal: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. Diseño de cuadrícula:
Configuración del display: grid;grid-template-columns: 150px 150px ;grid-template-rows: 150px 150px;
elemento principal: configuración del elemento secundario: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. Usar posicionamiento
(1) Se determina la altura del elemento secundario
Posicionamiento relativo de elementos principales, posicionamiento absoluto de elementos secundarios. El subelemento se proporciona top：50% ;margin-top:-（子元素高度的一半）px;como la altura superior en relación con la embarcación principal, por lo que se puede realizar por la mitad centrado verticalmente Guardar altura del subelemento.
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) La altura del elemento hijo es incierta
Uso de localización margin-top：-50pxen transform: translateY(-50%);movimiento ascendente del propio 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 la altura del elemento hijo
Los elementos secundarios izquierdo, derecho, inferior y superior son 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>
