Código de CSS - Centrar un texto vertical y horizontal dentro de un div

Imágen de perfil

Centrar un texto vertical y horizontal dentro de un divgráfica de visualizaciones


CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 10 de Noviembre del 2015 por xve
1.734 visualizaciones desde el 10 de Noviembre del 2015. Una media de 35 por semana
Este simple ejemplo, muestra como centrar de manera horizontal y vertical un texto dentro de un div

texto-centrado-vertical-y-horizontal-dentro-de-un-div

Versión 1.0
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 10 de Noviembre del 2015gráfica de visualizaciones de la versión: Versión 1.0
1.735 visualizaciones desde el 10 de Noviembre del 2015. Una media de 35 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>div centrado verticalmente y horizontalmente</title>
	<style>
	.contenedor
	{
		width:500px;
		height:300px;
		line-height:300px;
		border:1px solid;
		text-align:center;
	}
	.contenedor>span {
		display:inline-block;
		vertical-align:middle;
		line-height:normal;
	}
	</style>
</head>
 
<body>
	<div class='contenedor'>
		<span>texto centrado en<br>horizontal y vertical</span>
	</div>
</body>
</html>



Comentarios sobre la versión: Versión 1.0 (1)

Flex
21 de Febrero del 2016
estrellaestrellaestrellaestrellaestrella
hoes es mucho mas sencillo lograr esto gracias a la magia de Flex;


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div centrado verticalmente y horizontalmente</title>
<style>
.contenedor {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>

<body>
<div class='contenedor'>
texto centrado en<br>horizontal y vertical
</div>
</body>
</html>
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s3340