html - 在绝对定位的 div 上对齐文本 - 维恩图

Question

我借用了这个(接受的答案)venn diagram script做显而易见的事情，但是我正在努力获取我放入 <div> 中的任何文本对齐中心和 valign 中间。我已经尝试将两者都添加到 div {} 的 CSS 中，但这不起作用。我试过 display:table 确实有效，但这弄乱了其余圆圈的位置。如您所见，数字位于 outer1 div 的左上角。我需要它在中间，并且能够对所有 7 个圆圈/重叠部分执行相同的操作

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;
}

这是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>

或者如果有人有更好的替代方案来替代带有实时 php/mysql 数据的维恩图，那么请按照我的方式进行。

非常感谢

Answer 1

这样做:

标记

<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;
}