Css 文本的垂直中对齐不起作用

我想垂直中对齐高度为百分比的div中的文本。我使用的代码是这样的

CSS-

HTML-

这是一些文本。

---

这不管用。请提供帮助。

尝试在div上添加一个与该div实际高度相等的

行高度

所以如果你有

Blah

你的风格应该是

.foo{height:5em；line height:5em；}
span{font size:1em；}

您可以使用父div显示为表格，子div显示为表格单元格，或者使用另一种方法，如果您使用一行文字，则使用“行高”属性

带有表格单元格显示的Css

具有行高的Css

.div{
    position: fixed;
    left: 0px;
    border-radius: 10px;
    height: 6%;
    width: 20%;
    transform: translate(-10px,0px);
    -ms-transform: translate(-10px,0px);
    -webkit-transform: translate(-10px,0px);
    -o-transform: translate(-10px,0px);
    -moz-transform: translate(-10px,0px);
    z-index: 10
}
.div span {
    text-align: center;
    font: 20px/100% Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #fff;
    display: block;
    vertical-align: middle;
}

<div class="div"><span>This is some text.</span></div>

.div{
position: fixed;
left: 0px;
border: 1px solid black;
border-radius: 10px;
height: 50%;
width: 20%;
z-index: 100;
display: table;
}
.div span {
text-align: center;
font: 20px/100% Arial, Helvetica, sans-serif;
text-decoration: none;
color: black;
display: block;
vertical-align: middle;
display: table-cell;
}