Centre rotate

by 3axap

HTML

<div class="outer">
    <div class="inner">
        <div class="text">1 2 3</div>
    </div>
</div>
<div class="outer">
    <div class="inner">
        <div class="text">1 2</div>
    </div>
</div>

CSS

.outer {
    margin: 50px;
    display: block;
    position: relative;
    left: 100px;
    width: 100px;
    border: 1px solid black;
    background-color: silver;
    transform: rotate(360deg);    
}
.inner {
    /* shrink-to-fit width */
    display: inline-block;
    position: relative;
    /* shift left edge of text to center */
    left: 50%;
     transform: rotate(360deg);
}
.text {
    /* shift left edge of text half distance to left */
    margin-left: -50%;
    /* text should all be on one line */
    white-space: nowrap;
        transform: rotate(35deg);
}