Uno, div está centrado horizontal y verticalmente

1.flex

Se puede ver la introducción detallada y la aplicación de flex:
Flex (diseño flexible) realiza cinco diseños comunes

<div class="box">        
    <div class="context"></div>    
</div>

 .box{            
        width: 300px;            
        height: 300px;           
        background-color: #ccc;            
        display: flex;            
        justify-content: center;//水平居中
        align-items: center;//垂直居中
    }        
    .box .context{            
        width: 100px;            
        height: 100px;            
        background-color: blue;        
    }

2.posición (el elemento tiene un ancho y un alto conocidos)

El elemento padre se establece en: posición: relativa;
El elemento hijo se establece en: posición: absoluta;
Elemento secundario izquierdo: 50%; superior: 50%; (los porcentajes izquierdo y superior se basan en el elemento principal )
Entonces se puede lograr la distancia de la mitad del ancho y alto del elemento secundario con margen negativo

<div class="box">        
    <div class="context"></div>    
</div>

 .box{            
        width: 300px;            
        height: 300px;            
        background-color: red;            
        position: relative;        
    }        
    .box .context{            
        width: 100px;            
        height: 100px;            
        background-color: blue;            
        position: absolute;            
        left: 50%;            
        top: 50%;            
        margin: -50px 0 0 -50px;        
    }

Transformación de posición (ancho y alto desconocidos del elemento)

Simplemente reemplace el margen: -50px 0 0 -50px; en el ejemplo anterior
con: transform: translate (-50%, - 50%);
(el porcentaje en translate se basa en sí mismo)

<div class="box">        
    <div class="context"></div>    
</div>

 .box{            
        width: 300px;            
        height: 300px;            
        background-color: red;            
        position: relative;        
    }        
    .box .context{            
        width: 100px;            
        height: 100px;            
        background-color: blue;            
        position: absolute;            
        left: 50%;            
        top: 50%;            
		transform: translate(-50%, -50%);        
    }

4.posición (ancho conocido del elemento) maigin: auto

posición: absoluta;
arriba: 0;
abajo: 0;
izquierda: 0;
derecha: 0;
margen: automático;

<div class="box">        
    <div class="context"></div>    
</div>

 .box{            
        width: 300px;            
        height: 300px;            
        background-color: red;            
        position: relative;        
    }        
    .box .context{            
        width: 100px;            
        height: 100px;            
        background-color: blue;            
        position: absolute;            
        top: 0;            
        bottom: 0;            
        left: 0;            
        right: 0;            
        margin: auto;    
    }

5.celda de mesa

Establezca display: table-cell para el elemento principal, y establezca vertical-align: middle,
y luego establezca margin-left y margin-right del elemento secundario en auto.

<div class="box">        
    <div class="context"></div>    
</div>

 .box{            
       width: 500px;
       height: 500px;
       background: gray;
       display: table-cell;
       vertical-align: middle;
    }        
    .box .context{            
	      width: 200px;
	      height: 200px;
	      background: blue;
	      margin-left: auto;
	      margin-right: auto;
    }

En segundo lugar, el texto está centrado verticalmente (texto de una línea, texto de varias líneas)

Esta sección presenta la configuración de centrado vertical y horizontal text-align: center;

1. Utilice la altura de línea y la alineación vertical

<div class="word-vertically-center1">
    <div>
        <span>测试文字测试文字</span>
    </div>
    <div>
        <span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span>
    </div>
</div>

.word-vertically-center1 div {
    float: left;
    width: 200px;
    height: 200px;
    margin: 10px;
    border: 1px solid #000;
    line-height: 200px;
}

.word-vertically-center1 span {
    display: inline-block;
    vertical-align: middle;
    line-height: 22px;
}

2. 利用 pantalla: tabla-celda

<div class="word-vertically-center2">
    <div>
        <span>测试文字测试文字</span>
    </div>
    <div>
        <span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span>
    </div>
</div>

.word-vertically-center2 div {
    display: table-cell;
    width: 200px;
    height:150px;
    border:1px solid blue;
    vertical-align: middle;
}

3. Utilice el diseño flexible align-items: center;

<div class="word-vertically-center3">
    <div>
        <span>测试文字测试文字</span>
    </div>
    <div>
        <span>测试文字 <br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字<br /> 测试文字</span>
    </div>
</div>

.word-vertically-center3 div{
    float: left;
    width: 200px;
    height:150px;
    border: 1px solid #000;
    display: flex;
    align-items:center;
}

Referencia: https://blog.csdn.net/qq_39903567/article/details/114951168

Enlace a este artículo: https://blog.csdn.net/qq_39903567/article/details/115263277

Serie de entrevistas de front-end-conceptos básicos de CSS-div centrado horizontal y vertical && centrado de texto (texto de una sola línea, texto de varias líneas)

Directorio de artículos