center one div dentro de otro div - alinear los centros

Question

Estoy creando una pestaña con texto girado - Estoy tratando de centrar un div dentro de otro, sin embargo quiero que los centros de los divs se alineen pero estoy obteniendo problemas de alineación:

<div class="tileStrip" style="position:relative;width:100%;height:185px;background:#DDDDDD;"> 
    <div class ="clickToSlide" style="position:absolute;height:100%;width:30px;background:#AAAAAA"> 
    <div style="position:relative;top:50%">  
     <span style=" font-weight:bold;color:white;-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);display:block;">International</span> 
    </div> 
    </div> 
</div> 

cómo puedo centrar me uno div dentro de un div padre más grande verticalmente, de modo que mi texto girado se centra?

Answer 1

Las transformaciones rotan elementos por su punto central, por lo que debe colocar el centro de su <span> en el centro de la barra lateral antes de las transformaciones.

Antes que nada, no necesita el divisor de envoltura top:50%, puede hacerlo todo en el lapso.

• Antes de las transformaciones y los estilos adicionales, su tramo aparecerá en la esquina superior izquierda de su barra lateral.

• Agregar width:500px. Para posicionar con precisión el centro, el tramo debe ser ancho fijo, digamos 500px. Suponemos que ningún texto será más largo que eso.

• Agregar text-align:center. Ahora el texto está centrado correctamente en nuestro tramo de ancho fijo, aunque el tramo en sí está en la posición incorrecta.

• Agregue position:relative, por lo que podemos modificar la posición del tramo en relación con su posición original.

• Agregar top:50% y margin-top:-10px. Como el 50% establece el borde superior, necesitamos compensar con un margen superior negativo para centrar el tramo verticalmente. 10px es la mitad de la altura del tramo.

• Agregar left:50% y margin-left:-250px, lo mismo que arriba, centra el tramo horizontalmente. 250px es la mitad del ancho fijo del tramo.

• Finalmente agregue sus transformaciones, y debe centrarse correctamente.

resultante HTML:

<div class="tileStrip" style="position:relative;width:100%;height:185px;background:#DDDDDD;"> 
    <div class ="clickToSlide" style="position:absolute;height:100%;width:30px;background:#AAAAAA"> 
     <span style="font-weight:bold;color:white;display:block;text-align:center;width:500px;position:relative;top:50%;margin-top:-10px;left:50%;margin-left:-250px;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);">International</span> 
    </div> 
</div> 

Demostración: http://jsfiddle.net/jHrEm/7/