JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper example-1">
    <div class="inner">
        content
    </div>
</div>

<div class="wrapper example-2">
    <div class="inner">
        <p>content</p>
    </div>
</div>

<div class="wrapper example-3">
    <img class="photo" src="http://placehold.it/100x50" />
</div>

CSS

/* Example 1 */
.example-1.wrapper {
    position: relative;
    
    width: 150px; /* or 100% .. */
    height: 150px;

    background: #ddd;
}

.example-1.wrapper .inner {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;
    
    width: 100px; /* or 100% .. */
    height: 100px;
    
    background: #ccc;
}

/* Example 2 */
.example-2.wrapper {
    display: table;
    
    width: 150px;
    height: 150px;

    background: #ddd;
    margin: 10px 0 0;
}

.example-2.wrapper .inner {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.example-2.wrapper .inner p {
    display: inline-block; /* inline or inline-block */
    background: #ccc;
}

/* Example 3 */
.example-3.wrapper {
    position: relative;
    
    width: 150px; /* or 100% .. */
    height: 150px;

    background: #ddd;
    margin: 10px 0 0;
}

.example-3.wrapper .photo {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;
    
    width: auto;
    max-width: 100%;
    height: auto;
}