<div class="wrap">
<div class="child">
I'm am element in block. I have the very long content in me. My role is fill child element to make his has a unfixed height.
</div>
</div>
body {
background: #f06d06;
padding-top: 40px;
}
.wrap {
position: relative;
background: #fff;
border-radius: 5px;
width: 300px;
height: 300px;
margin: 0 auto;
text-align: center;
}
.child {
border: 1px solid #eee;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
color: #666;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.