Html 使用内联块时垂直对齐文本

我已经为这个问题寻找了好几天了，似乎没有一个解决方案适合我的需要。请帮忙

我有两个div，我想填充100%的浏览器宽度，还有更多的div将叠加以填充高度我希望每个（由javascript生成）中的文本垂直对齐。

我还尝试过使用display:table cell，它在各个方面都非常有效，但是我无法将单元格宽度设置为固定的%，我需要添加html标记，这似乎限制了我以后使用某些媒体查询

如何使用内联块垂直对齐文本？

我拉小提琴有困难，但这很接近：

这是我的CSS

html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow-y: hidden;
        font-family: helvetica;
    }
    #status {
        width: 100%;
        font-size: 0;
    }
    #line0, #status0 {
        display: inline-block;
        width: 50%;
        vertical-align: middle; 
        height: 10%;
    }
    h2 {
        font-size: 18px;
    }

    #line0 {
        background-color: #B36305;
        color: white;
    }
    #status0 {
        background-color: black;
        color: white;
    }

还有HTML

<div id ="status">
    <div id="line0"></div>  
    <div id="status0"></div>        
</div>

---

史蒂文·布拉德利（Steven Bradley）的一篇文章介绍了使用CSS进行垂直居中的6种方法：

哪种解决方案最好取决于您的需求。我认为绝对定位和负边距方式可能是您需要的解决方案，因为您的容器有一个定义的高度

---

---

使用

显示时：内联块；垂直对齐：居中

元素仅垂直居中于当前行的其他内联元素。

这是您想要的吗

如果你想让两个div的宽度都达到100%，那是不可能的！否则，div的其余部分将被另一个隐藏

进一步澄清需要什么

<div id ="status">
<div id="line0"><h2>Bakerloo</h2></div> 
<div id="status0"><h2>Good Service</h2></div>
</div>

#状态0{
背景：红色；
宽度：49%；
显示：内联块；
}

为什么要使用display:inline块？你必须用这种方法吗？尝试将float:left改为display:inline block放入block#line0、#status0中，在您可以处理文本后，您可以尝试以下操作

#line0{
    background:pink;
    width:50%;
    display: inline-block;
    float:left;/*added*/
}
#status0{    
    background:red;
    width:50%;
    display: inline-block;
}

---

也显示您的标记，如果可能的话，制作一把小提琴，这可能会帮助我们了解很多东西，看起来很有希望。按照这个例子，我需要使父对象相对定位，子对象绝对定位。当我使用内联块定位元素时，这是如何工作的？我应该创建嵌套的div吗？如果是的话，它们应该放在哪里？我想你需要一个包装器

div

then，它是

position:absolute；最高：50%；身高：10%；页边距顶部：-5%

其中包含所有

显示：内联块

元素

#line0{
    background:pink;
    width:50%;
    display: inline-block;
    float:left;/*added*/
}
#status0{    
    background:red;
    width:50%;
    display: inline-block;
}