JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <div class="outer-wrapper">
        <div class="middle-wrapper">
            <div class="inner-wrapper">
                <div class="content">
                 sdffdfgfdg sdfsd sdf sd sdfsd fsdf sdf sdf sdf sdf sdf sdf sdf 
                    sdffdfgfdg sdfsd sdf 
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.box {
	display: block;
	position: absolute;
	top: 72px;
	bottom: 264px;
    width: 100%;
    border: 1px solid red;
    overflow: auto;
}

.outer-wrapper {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    height: 100%;
    width: 100%
}

.middle-wrapper {
    vertical-align: middle
}

.inner-wrapper {
    margin-left: auto;
    margin-right: auto;
	width: 212px;
}

.content {
    overflow: scroll;
    background-color: green;
}