JSFiddle - React, Tailwind, and code Playground

by avrahamcool

HTML

<h3>Center everything within anything</h3>
    <p>The Container and Content height are unknown.</p>
    <p>Centering without specific negative margin, without setting the line-height (so it works well with multiple line of text) and without a script, Works great with CSS transitions.</p>
    <p>Tested On: IE10, [IE9, IE8 without transitions], Chrome, FireFox, Safari</p>
    <div class="Container">
        <div class="Content">
            I'm the Content
            <br/>
            and I have 2 line of text
        </div>
    </div>

CSS

html, body
{
    height: 100%;
}

.Container
{
    text-align: center;
    /*for demonstration only*/
    background-color: #aa96cc;
    height: 50%;
}

    .Container:before
    {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }

.Content
{
    background-color: #cbf1a9;
    display: inline-block;
    vertical-align: middle;
    /*for demonstration only*/
    -moz-transition: font-size linear 1s;
    -o-transition: font-size linear 1s;
    -webkit-transition: font-size linear 1s;
    transition: font-size linear 1s;
}
    /*for demonstration only*/
    .Content:hover
    {
        font-size: 30px;
    }