<div class="content">
                <h1>Title</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae quasi sunt magnam, dolorum, quae omnis doloremque dolor molestiae molestias quis? Sapiente a dolorum laboriosam ratione incidunt totam cupiditate nihil in tenetur ad perspiciatis, vel debitis dolore distinctio quaerat, necessitatibus aliquid!</p>
                <img src="https://via.placeholder.com/350x150" alt="">
                <img src="https://via.placeholder.com/350x150" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi iusto sapiente earum placeat delectus assumenda molestias expedita amet enim soluta?</p>
                <img src="https://via.placeholder.com/350x150" alt="">

            </div>

.monitor .content
{
    position: absolute;
    top: 50%;
    left: 50%;
    background: white; /* Remove this line once you've figured out the size you want  - or change the colour of it */
    height: 500px; /* change these to make them fit your screen */
    width: 600px;
    transform: translate(-50%, -50%);
    max-height: 400px; /* change this to something else to match the rest of your display */
    overflow-y: auto; /* automatically show the scroll bar when the text is too powerful */
    padding: 10px;
}

.monitor .content h1
{
    margin: 0;
    padding: 10px 0 0 20px; /* top right bottom left padding */
    text-align: center /* Remove this line if you don't want it in the center */

}

.monitor .content img
{
    /*  you can add some bits in here if you want to fiddle with the pictures */
}