vertically Center

by Kheema Pandey

HTML

<div class="pack-squares">
<div class="small-rhombus">
<div class="inside">
<div class="ccc">
<div class="dddd">
<p>This is my text</p>
</div>
</div>
</div>
</div>

CSS

.small-rhombus {
width: 188px; height: 188px; border: 1px solid #000; background: none;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        margin-left:35px;
        margin-right:0;
    line-height: 188px;
     text-align: center;
}
.inside {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            display: inline-block;
            font-size: 15px;
            vertical-align: middle;
            color: #000;
            text-align: center;
        }