Overflow issue with vertically centered popup with vertical-align

I'm trying to create a popup in my application and I need to center it vertically. I do NOT know the height of the popup, so I can't hard-code any values.

I'm experimenting with the following code: Centering in the Unknown

So far the centering works fine, but there is a problem. My popups have a fixed width(and they are not responsive), so my goal is when the width of window is lower than popup's width, a horizontal scroolbar should appear.

On higher resolution the centering works fine:

But when window resolution is lower than popup resolution, this happens: (The actual popup is moved under viewport)

HTML:

<div class="block">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>
</div>

CSS

.block {
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.block:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
 }

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 500px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
 }