以下是一些简单的垂直对齐技术：

单行垂直对齐：中间

这很简单：将文本元素的行高度设置为等于容器的行高度

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

多行垂直对齐：底部

相对于容器绝对定位内部div

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

多行垂直对齐：中间

<div style="display:table;width:30px;height:60px;">
  <div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>

如果您必须支持IE的早期版本<=7

为了让它在所有方面都能正常工作，你必须稍微修改一下CSS。幸运的是，有一个IE bug对我们有利。在容器上设置top:50%，在内部div上设置top:-50%，可以获得相同的结果。我们可以使用IE不支持的另一个功能将两者结合起来：高级CSS选择器。

<style type="text/css">
  #container {
    width: 30px;
    height: 60px;
    position: relative;
  }
  #wrapper > #container {
    display: table;
    position: static;
  }
  #container div {
    position: absolute;
    top: 50%;
  }
  #container div div {
    position: relative;
    top: -50%;
  }
  #container > div {
    display: table-cell;
    vertical-align: middle;
    position: static;
  }
</style>

<div id="wrapper">
  <div id="container">
    <div><div><p>Works in everything!</p></div></div>
  </div>
</div>

可变容器高度垂直对齐：中间

此解决方案需要比其他解决方案稍微更现代的浏览器，因为它使用了transform:translateY属性。(http://caniuse.com/#feat=transforms2d)

无论父元素的高度如何，将以下3行CSS应用于元素将在其父元素中垂直居中：

position: relative;
top: 50%;
transform: translateY(-50%);

不知道为什么它不在导航浏览器上显示，但我通常在尝试显示带有图像和居中文本的标题时使用这样的代码段，希望它有所帮助！

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>

您必须对两个元素应用垂直对齐：中间对齐，以使其完全居中。

＜div＞<img style=“vertical align:middle”src=“http://lorempixel.com/60/60/">完美居中</span></div>

被接受的答案确实将图标置于旁边文本x高度的一半左右（如CSS规范中所定义）。这可能足够好，但如果文本在顶部或底部有上升部分或下降部分，则可能看起来有点偏离：

左侧的文本未对齐，右侧的文本如上图所示。在这篇关于垂直对齐的文章中可以找到一个实时演示。

有人讨论过为什么垂直对齐：顶部在场景中起作用吗？问题中的图像可能比文本高，因此定义了线框的顶部边缘。垂直对齐：在span元素的顶部，然后将其放置在线框的顶部。

垂直对齐：中间和顶部之间行为的主要区别在于，第一个相对于框的基线移动元素（将其放置在需要实现所有垂直对齐的位置，因此感觉相当不可预测），第二个相对于线框的外部边界移动元素（更为有形）。

基本上，你必须降到CSS3。

-moz-box-align: center;
-webkit-box-align: center;

第二部分{显示：柔性；对齐项目：居中；}＜div＞<img src=“http://lorempixel.com/30/30/“alt=”小img“/><span>它起作用了</span></div>

我同意，这可能令人困惑。尝试利用表格功能。我使用这个简单的CSS技巧将情态动词放在网页的中心。它具有大型浏览器支持：

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

和CSS部分：

.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }

请注意，您必须设置图像和表格容器的样式并调整其大小，以使其按您的需要工作。享受