Olá amada comunidade!
Estou rotacionando um p dentro de uma div, porem não consigo centralizar ele, estou com bastante dificuldade no css, ja tentei definir um width: e height: para o p, deixei como auto, mas não funciona.
p.vertical
{
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg); /* Safari/Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-ms-transform: rotate(-90deg); /* IE 9 */
font-size: 17.5px;
font-family: Arial;
}
<div style=' display: inline-block; border-style: solid; border-color: grey; border-width: 2px; border-radius: 4px; padding: 10px;'>
<div style='background-color: rgb(245,245,245); display: inline-block;
position: relative;
padding-left: 150px;'>
<div style='background-color:blue; width: 150px; display: inline-block; float:left;
position: absolute;
top: 0;
bottom: 0;
left: 0;'><p class='vertical'>Como centralizo esse texto baseado na altura da div azul?</p></div>
<div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div>
<div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div>
<div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div>
<div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div>
<div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div>
<div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div>
<div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div>
<div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div>
<div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div>
<div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div>
<div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div>
<div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div>
<div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div>
<div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div><div style="float:left;">
<table border='1' style='background-color: red;'>
<tr>
<td>ola</td>
<td>teste</td>
</tr>
</table>
</div>
</div>
</div>
Tenho uma duvida também relativo ao CSS, porque o porque não respeita o tamanho da div azul, se ele é filho?