具有流体高度的锚的垂直居中文本

Question

我正在努力实现这一目标：

容器为height: 100%，每个li为height: 50%。链接高度为50％，整个彩色区域应该是可点击的。 这是我的代码：

html, body {
    height: 100%;
}

.menu {
    height: 100%;

    ul {
        height: 100%;

        li {
            height: 50%;

            a {
                display: block;
                height: 100%;
                line-height: 100%;
            }
        }
    }
}

不幸的是，line-height技巧并不起作用。窗口的高度显然是流动的，因为它应该响应每个设备。想法？

Answer 1

尝试在line-height: 50%元素上设置<li>。

Answer 2

您可能需要使用position relative和absolute之类的东西来实现这一目标。

html, body {
    height: 100%;
    margin:0px;
    padding:0px;
}

.menu {height: 100%;}
.menu ul {
        height: 100%;
        list-style:none;
        margin:0px;
        padding:0px;
}
 .menu ul li {
            height: 50%;
            width:100%;
            display:table;
}

.menu ul li a {
    display:table-cell;
    vertical-align:middle;
    text-decoration:none;
    font-weight:bold;
    text-align:center;
    color:#000;
}

这是一个工作小提琴：

http://jsfiddle.net/qsHw2/2/

Answer 3

如果你这样做怎么办？ http://jsfiddle.net/SBag9/2/

.menu {

height: 100%;
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
margin-top: 50%;
}