Align text on absolute positioned div - venn diagram - html

Question

I've borrowed this (Accepted Answer) venn diagram script to do the obvious, However I'm struggling to get any text I put within the <div> to align center and valign middle. I've tried adding both into the CSS for div {} but this doesn't work. I tried display:table which did work, however this messed up the position of the rest of the circles. As you can see the number is at the top left of the outer1 div. I need it in the middle, and to be able to do the same for all 7 circles/overlaps
css:
.venn div {
width: 250px;
height: 250px;
border-radius: 50%;
pointer-events: none;
position: absolute;
text-align: center;
vertical-align: middle;
}
.venn.innerw {
left: 50px;
top: 0px;
overflow: hidden;
position: absolute;
/* border: solid; */
z-index: 20;
/* transform: translateZ(10px); */
pointer-events: none;
}
.venn.innerw2 {
margin-left: 0px;
top: 0px;
overflow: hidden;
position: static;
/* border: solid; */
/* z-index: 20; */
pointer-events: none;
}
.venn.innerw3 {
margin-left: 170px;
top: 0px;
overflow: hidden;
position: static;
/* border: solid; */
/* z-index: 20; */
pointer-events: none;
}
.venn.inner {
margin-left: -85px;
margin-top: 130px;
background-color: palegreen;
z-index: 20;
position: static;
pointer-events: auto;
}
.venn.inner:hover {
background-color: green;
}
.venn.mwrap {
position: absolute;
overflow: hidden;
pointer-events: none;
z-index: 10;
}
.venn.mwrap2 {
position: static;
margin-left: 0px;
margin-top: 0px;
overflow: hidden;
pointer-events: none;
}
.venn.mid {
position: static;
pointer-events: auto;
}
#midaw1 {
left: 50px;
top: 0px;
}
#mida {
left: 50px;
margin-left: 170px;
margin-top: 0px;
}
#midbw1 {
left: 220px;
top: 0px;
}
#midb {
margin-left: -85px;
margin-top: 130px;
}
#midcw1 {
left: 135px;
top: 130px;
}
#midc {
margin-left: -85px;
margin-top: -130px;
}
.venn.mid {
background-color: lightblue;
z-index: 15;
}
.venn.mid:hover {
background-color: blue;
}
#outer1 {
left: 50px;
top: 0px;
}
#outer2 {
left: 220px;
top: 0px;
}
#outer3 {
left: 135px;
top: 130px;
}
.venn.outer {
background-color: lightcoral;
z-index: 1;
pointer-events: auto;
}
.venn.outer:hover {
background-color: red;
}
Here's html
<div class="venn">
<div id="outer1" class="venn outer">
<?php echo $lp1; ?>
</div>
<div id="outer2" class="venn outer">
</div>
<div id="outer3" class="venn outer">
</div>
<div id="midaw1" class="venn mwrap">
<div id="midaw2" class="venn mwrap2">
<div id="mida" class="venn content mid"></div>
</div>
</div>
<div id="midbw1" class="venn mwrap">
<div id="midbw2" class="venn mwrap2">
<div id="midb" class="venn content mid"></div>
</div>
</div>
<div id="midcw1" class="venn mwrap">
<div id="midcw2" class="venn mwrap2">
<div id="midc" class="venn content mid"></div>
</div>
</div>
<div class="venn innerw">
<div class="venn innerw2">
<div class="venn innerw3">
<div class="venn inner">
</div>
</div>
</div>
</div>
</div>
OR if someone has a better alternative for a venn diagram with live php/mysql data then please fire it my way.
Many Thanks

Answer 1

Do it like this:
Markup
<div class="venn">
<div id="outer1" class="venn outer">
<p>Some text</p>
</div>
</div>
CSS
.venn.outer{
display: table;
text-align: center;
}
.venn.outer p{
display: table-cell;
vertical-align: middle;
}