JSFiddle - React, Tailwind, and code Playground

by oliverdoetsch

HTML

<div class="flex-box">
    <div class="flex-item">
         <h3 >Ich bin zentriert!!</h3>

        <p>Diese Box ist horizontal und vertikal zentriert, egal wie groß diese Box oder das umgebende Element ist.</p>
    </div>
</div>

CSS

.flex-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 24em;
    background: #ff1;
        min-width: 10em
}
.flex-item {
    width: 50%
}