Javascript 跨中对齐不工作

我正在尝试设计一个移动网站。需要让ABC中间垂直。我接着问了其他一些问题：如何使跨文本垂直居中。但在这里它不起作用。我已经包括了jsfiddle我不确定我错过了什么

<div id="main">
        <div id="header">
            <div id="logo"><img src="http://placehold.it/72x38"></div>
            <div id="menu">a</div>
            <div id="title-wrapper"><div id="title"><span id="screen-title">ABC</span></div></div>

        </div>
        <div id="company-name">CCCCCC</div>     
    </div>



 * {    margin:0; padding:0}

#header{
    height:53px;
    padding:0;
}
        #logo{  
            float:left; 
            background: #ffffff;
            padding:5px;
        }
        #title{
            text-align:center;
            height:100%;                
            margin:0 auto;

        }
        #title-wrapper{

            height:100%;
            background: #ff3eae;
        }
        #screen-title{
            vertical-align: middle;
            display: inline-block;

        }
        #menu{
            width:20%;
            height:100%;
            float:right;
            padding:0;
            background: #E23222;
        }
#company-name{
    width:100%;
    float:left;
    background: darkblue;
    clear:left;
    padding:0px;
    color: #ffffff;
    text-align: center;
}
#main {width:240px}

A.
基础知识
中交
*{边距：0；填充：0}
#标题{
高度：53px；
填充：0；
}
#标志{
浮动：左；
背景：#ffffff；
填充物：5px；
}
#头衔{
文本对齐：居中；
身高：100%；
保证金：0自动；
}
#标题包装{
身高：100%；
背景：#ff3eae；
}
#屏幕标题{
垂直对齐：中间对齐；
显示：内联块；
}
#菜单{
宽度：20%；
身高：100%；
浮动：对；
填充：0；
背景：#E23222；
}
#公司名称{
宽度：100%；
浮动：左；
背景：深蓝色；
清除：左；
填充：0px；
颜色：#ffffff；
文本对齐：居中；
}
#主{宽度：240px}

添加

行高：Xpx

其中X是获得所需效果的合适值（通常与元素的高度相同）

将

#title

的显示转换为

表格

并将

#屏幕标题

的显示转换为

表格单元格

：

/* ... */

    #title{
        display: table;
        height:100%;
        margin:0 auto;
    }

/* ... */

    #screen-title{
        vertical-align: middle;
        display: table-cell;
        text-align: center;
    }

---

但是请注意，有很多可能使用css将一些文本垂直居中，每个文本都有其特定的缺点。这只是一种可能性。只需查看谷歌搜索“垂直中心css”的一些结果。这似乎是一个属于自己的科学领域。

似乎你必须为它设定一个静态的高度和宽度。 这应该行得通。（试一试）

---

Kolink方法的一个示例：。这并不理想，因为你必须知道明确的高度，但它会起作用。谢谢。它起作用了。在我的例子中，我有一个包含span&a按钮的div。包含复选框和标签的范围。按钮更大&我想垂直中对齐跨度。@Adarshinghal:如果你自己找不到答案，请发布一个新问题。

    #screen-title{
            display: table-cell;
            height: 50px;
            width: 200px;
            text-align: center;
            vertical-align: middle;