Html 在我的情况下如何进行垂直对齐

我正在尝试对我的文本进行垂直对齐。我还想确保绿色背景div需要在红色div内从上到下覆盖。目前，绿色div仅覆盖红色oolor div的90%。我不确定在我的情况下发生了什么。有人能解释一下并帮我解决吗

html

谢谢。

演示

您的

html

结构将正常工作，但您需要更改样式：

.title {
    display: inline-block;
    padding-left: 45px;
    vertical-align: middle;
    margin: 0;
    line-height:50px;
}
.head {
    position:absolute;
    left:0;
    width: 30px;
    height: 100%;
    display: inline-block;
    background-color: #A9D075;
}
#wrapper {
    position:relative;
    width:200px;
    height:50px;
    background-color: red;
}

.title{
    display: inline;   
    padding-left: 15px;
    vertical-align: middle;    
    margin: 0;
}

.head{
    width: 30px;
    height: 50px;
    display: inline-block;
    background-color: #A9D075;
}

#wrapper{
    width:200px;
    background-color: red;
}

.title {
    display: inline-block;
    padding-left: 45px;
    vertical-align: middle;
    margin: 0;
    line-height:50px;
}
.head {
    position:absolute;
    left:0;
    width: 30px;
    height: 100%;
    display: inline-block;
    background-color: #A9D075;
}
#wrapper {
    position:relative;
    width:200px;
    height:50px;
    background-color: red;
}