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

This question already has an answer here:

  • Flexbox: center horizontally and vertically 8 answers
  • How to vertically align text inside a flexbox? 4 answers

  • 这与你试图达到的目标相似吗?

    #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>
    链接地址: http://www.djcxy.com/p/76012.html

    上一篇: 如何让这个div对齐中心?

    下一篇: 垂直对齐另一个div内两个不同div的文本