垂直对齐两个不同 div 中另一个 div 中的文本

Question

我正在尝试垂直对齐两个 div 内的文本。我尝试了此处找到的许多解决方案，但 none 产生了所需的结果。

我已经创建了一个 sjFiddle:

#outer {
  position: relative;
}

#inner1 {
  position: absolute;
  align-items: center;
  top: 10%;
  bottom: 10%;
  width: 100%;
  height: 40%;
}

#inner2 {
  position: absolute;
  align-items: center;
  top: 50%;
  bottom: 10%;
  width: 100%;
  height: 40%;
}

html,
body {
  height: 100%;
}

#outer {
  background-color: purple;
  width: 50%;
  height: 50%;
}

#inner1 {
  background-color: yellow;
}

#inner2 {
  background-color: red;
}

<div id="outer">
  <div id="inner1">
    Test text 1
  </div>
  <div id="inner2">
    Test text 1
  </div>
</div>

任何人都可以根据我 fiddle 中的代码看到我如何做到这一点。非常感谢您的宝贵时间。

Answer 1

这与您想要实现的目标相似吗？

#outer {
    height:100%;
    padding:10% 0;
    box-sizing:border-box;
}

#inner1 {
  height:50%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}


#inner2 {
  height:50%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

html, body { height: 100%; }
#outer {
    background-color: purple;
}
#inner1 {
    background-color: yellow;
}

#inner2 {
    background-color: red;
}

<div id="outer">
    <div id="inner1">
         Test text 1
     </div>
     <div id="inner2">
         Test text 1
    </div>
</div>

我已经从内部 div 中删除定位并将它们制作成 flexbox，从而允许我们使用 justify-content 和 align-items 来实现水平和垂直居中。

垂直对齐两个不同 div 中另一个 div 中的文本

vertical align text in two different div's inside another div

html

css

centering

flexbox