Html 将文本中间垂直对齐

我无法使用绝对位置法垂直对齐某些文本中间。

HTML

---

我在添加代码时遇到堆栈溢出错误，这可能是堆栈溢出中的错误，因此请按照链接进行操作。

设置

行高：100px

到

.heighted

或

.middle wrapper

或

.middle

-

CSS:

.heighted {
    background: gray;
    height: 100px;
    line-height: 100px;
}
.middle-wrapper {
    height: 100%;
    position: relative;
}
.middle {
    bottom: 0;
    margin: auto;
    position: absolute;
    top: 0;
}

<div class="heighted">
    <div class="middle-wrapper">
        <span class="middle">text to be vertically aligned in the middle</span>
    </div>
</div>
<hr/>
<div class="heighted">
    <div class="middle-wrapper">
        <img class="middle" src="http://www.google.com/homepage/images/google_favicon_64.png" />
    </div>
</div>

HTML:

.heighted {
    background: gray;
    height: 100px;
    line-height: 100px;
}
.middle-wrapper {
    height: 100%;
    position: relative;
}
.middle {
    bottom: 0;
    margin: auto;
    position: absolute;
    top: 0;
}

<div class="heighted">
    <div class="middle-wrapper">
        <span class="middle">text to be vertically aligned in the middle</span>
    </div>
</div>
<hr/>
<div class="heighted">
    <div class="middle-wrapper">
        <img class="middle" src="http://www.google.com/homepage/images/google_favicon_64.png" />
    </div>
</div>

要在中间垂直对齐的文本

您应该尝试

显示：表格单元格并使用
垂直对齐：中间

检查和优化的效果：

以及：
文本也可能很长，或者屏幕尺寸可能会缩小到移动，这将使其中断。根据您的小提琴
显示：表格单元格，查看@Jack
是最好的方法，但是应该在之前告诉我。哈哈……很好，它很有效，但我也想知道为什么我的示例不起作用。@Jack margin auto不适用于高度和按钮。。这只适用于左右两边。。试试这个。。我使用了Top属性的百分比值