Untitled

dabblet.css

.area {
  width: 300px;
  height: 300px;
  background: url(../images/abe-bg.png) no-repeat;
  position: relative;
  border:5px solid #000;
}

.bubble {
  position: absolute;
  left: 0px;
  top: 0px;
  width:300px;
  height: 300px;
  border:1px solid #000;
  display: table;
}

.bubble p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

dabblet.html

<div class="area">
      <div class="bubble">
          <p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p>
      </div>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}