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

Pos: 2

Val: 624

Ha mantenido su posición en CSS (en relación al último mes)

Centrar un texto vertical y horizontal dentro de un div

CSS

(9)

Publicado el 10 de Noviembre del 2015 por Xve (294 códigos)

125.225 visualizaciones desde el 10 de Noviembre del 2015

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

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

Versión 1.0
(9)

Publicado el 10 de Noviembre del 2015

gráfica de visualizaciones de la versión: Versión 1.0

125.226 visualizaciones desde el 10 de Noviembre del 2015

<!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 (9)

Flex

21 de Febrero del 2016

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

alignment

20 de Septiembre del 2018

Wow

Al parecer no tenia solución facil.

Gracias

Responder

ScriptShow

29 de Agosto del 2017

No ha dejado ningún comentario

Responder

Alberto

30 de Diciembre del 2017

No ha dejado ningún comentario

Responder

lalo

15 de Marzo del 2018

perfectom me sirvio =)

Responder

Daniel

18 de Enero del 2019

Curiosa técnica tengo que admitir que es creativa. Sin embargo está condicionada a un único elemento y a conocer la altura del contenedor. Echadle un ojo a este artículo con varios métodos sencillos para centrar texto verticalmente con css: http://www.elcssar.com/css/vertical-align-flex

Responder

heffermmann

14 de Enero del 2020

pero a nosotros siempre nos están enseñando que nunca se use el <style> </style> en html5 y la nueva versión.
Hay que crear una clase para llamarla y lo modifique sin hacer eso. Hay que acostyumbrase desde el inicio a programar así.

Responder

Perro

12 de Septiembre del 2020

No ha dejado ningún comentario

Responder

SAASD

3 de Junio del 2022

SADSADSDADSA

Responder