CenteredDivScrollOverflowProblem

A perfectly centered div.

HTML

<div class="container bigger">
  <div class='content'>
    <p>centered...</p>
    <p>centered...</p>
    <p>centered...</p>
    <p>centered...</p>
  </div>
</div>

<div class="container same">
  <div class='content'>
    <p>centered...</p>
    <p>centered...</p>
    <p>centered...</p>
    <p>centered...</p>
  </div>
</div>

<div class="container smaller">
  <div class='content'>
    <p>centered...</p>
    <p>centered...</p>
    <p>centered...</p>
    <p>centered...</p>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.container {
  position: relative;
  background-color: gray;
  margin: 10px;
}

.bigger {
  width: 300px;
  height: 300px;
}

.same {
  width: 200px;
  height: 200px;
}

.smaller {
  width: 100px;
  height: 100px;
}

.content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  max-width: 100%;
  max-height: 100%;
  background: rgba(987, 654, 321, .6);
  overflow: scroll;
}