¿Cómo mantener el texto dentro de un div, siempre en el medio?

Intento que el texto permanezca en el medio de un DIV redimensionable. Aquí está el ejemplo:

CSS

#rightmenu { position: absolute; z-index: 999999; right: 0; height: 60%; text-align: center; } 

HTML

 
This text should be center aligned and in the middle of the resizable rightmenu

Intenté hacer que una Clase contenga el texto con “margen superior e inferior de margen” tanto en automático, pero no funciona.

Si no te importa el soporte de IE7, puedes hacerlo así:

HTML:

 
Content, content, content.

CSS:

 #wrap { /* Your styling. */ position: absolute; z-index: 999999; right: 0; height: 60%; text-align: center; /* Solution part I. */ display: table; } /* Solution part II. */ #inside { width: 100%; height: 100%; display: table-cell; vertical-align: middle; } 

El código: http://tinkerbin.com/ETMVplub

Si estás de acuerdo con JavaScript, puedes probar este plugin de jQuery: http://centratissimo.musings.it/, pero como tampoco parece ser compatible con IE7, la solución CSS es probablemente mejor.

Flexbox realmente ha cambiado el juego con la alineación de elementos de manera fluida. Defina el elemento del contenedor que se va a display: flex y luego para alinear los elementos interiores que usará justify-content: center; align-items: center; justify-content: center; align-items: center;

 .container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; align-items: center; } .parent { height: 500px; width: 500px; position: relative; } 

Hello

World

Notarás que “Hello” y “World” se centrarán vertical y horizontalmente dentro del elemento .container .

Reemplace la height: 60%; con padding: 30% 0; .

Si desea que el texto se centre horizontalmente en un div, ‘text-align: center;’ es tu amigo. Si lo quieres centrado verticalmente; envuelva el contenido dentro de un div interno, y luego use ‘margin: auto’ para ese div interno. Por supuesto, tendrás que darle un ancho al div interno; de lo contrario, el centro horizontal no funcionará.
‘valign = “middle”‘ también funciona en las tablas si las tablas son una opción (de lo contrario, se desaconseja)

Verifique si esto es necesario:

      

centered