Cuadrado rojo con contenido centrado

[v3sTi4]

Hola,
Estoy intentando pero no me sale, o mejor dicho, no se realizar con css una cosa bastante básica: un cuadrado rojo (esto se hacerlo) y luego que el texto que escriba, por ejemplo un número quede perfectamente centrado.


Yo he hecho esto:
<div style="background-color:#CC0000; height:35px; width:35px; font-size:24px; text-align:center;">90</div>

A este código si le añades margin-top, bottom, etc. No consigo cuadrarlo. Se me queda el contenido más próximo al extremo superior que al inferior.

De los lados (derecha e izquierda) con text-align:center si se consigue centrar, pero no "por su altura".

¿Alguna idea?
Gracias

[kseso?]

Podrías utilizar los valores de display "table | table-group..." pero tendrías problemas con algún ie.

Así que lo mejor que podrías ir por otra vía, el padding.
En vez de dar altura a la caja, márcale un padding superior e inferior iguales. (padding: 20px 0;) por ejemplo. Siempre y cuando tu diseño lo permita.

Estaría bien que ampliases información sobre lo que quieres centrar en esa caja (un párrafo de texto, enlaces, ...)

Un saludo

[v3sTi4]

El contenido que quiero centrar realmente son 2 números, el caso tal cual lo he expuesto en código.

He probado añadiendo padding: 5px 5px 5px 5px quitándo las definiciones de alto y ancho y no funciona correctamente, se crea un rectángulo demasiado alargo.

Si mantengo las definiciones en IE funciona, pero en Firefox, Chrome, entre otros no.

Hace un rato he probado esto:
<div style="
background-color:#CC0000;
width:35px;
height: 35px;
font-size:24px;
text-align:center;
color: #ffffff;
font-family: Arial;
">
<div style="
position: relative;
top: 5px;
">90
</div>
</div>

He añadido esto que señalo, un div dentro con posicion relativa respecto de la ubicación del anterior y dandole un top, que era donde fallaba y así se visualiza correctamente.

No se si habrá forma mejor, pero es lo único que he conseguido hacer.

[kseso?]

Desconozco la naturaleza de esos números. ¿Son datos tabulados? pues puedes utilizar una tabla para presentarlos, y ahí no tendrías problemas de centrado y alineación.
También puede que sea correcto alojarlos en una lista (ul/li).
Pero centrándome en el código que facilitas, sería algo así como:

Código css:

.texto {width: 35px; margin: 0 auto; background: #CC0000; padding: 5px;}
.texto p {color: #f5f5f5; text-align: center;font-size: 24px; font-family: verdana, sanserif;}
 

Código html:

<div class="texto">
<p>90</p>
<p>60</p>
</div>
 

Pero debido a lo que te decía antes, posiblemente surjan situaciones donde esa solución no sea válida.

Un saludo