JSFiddle - React, Tailwind, and code Playground

by danieljsinclair

HTML

<body>
    <div class="container">
            <div class="tx">This text will center align no matter how many lines there are</div>
    </div>

    <div class="container"> 
        <div class="tx">This  kw elkr lkw jelkrj lkwe jlkr j This  kw elkr lkw jelkrj lkwe jlkr j This  kw elkr lkw jelkrj lkwe jlkr j This  kw elkr lkw jelkrj lkwe jlkr j This  kw elkr lkw jelkrj lkwe jlkr j This  kw elkr lkw jelkrj lkwe jlkr j This  kw elkr lkw jelkrj lkwe jlkr j This  kw elkr lkw jelkrj lkwe jlkr j This  kw elkr lkw jelkrj lkwe jlkr j This  kw elkr lkw jelkrj lkwe jlkr j </div>
    </div>
</body>

CSS

.container
{
    margin:2%;
    background-color:#888888;
    width:30%;
    padding-bottom:30%; /* relative size and position on page */
    float: left;
    position:relative;  /* coord system stop */
    top:0px;
}

.tx
{       
    position: absolute;
    text-align: center;
    padding-top:100%;
    -webkit-transform: translateY(-50%); /* child now centers itself relative to the midline based on own contents */
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod="auto expand")'; /*IE8 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod='auto expand'); /*IE6, IE7*/
    transform: translateY(-50%);    
}