只使用Bootstrap类:

Div: class="容器d-flex" div中的元素:class="m-auto"

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" crossorigin="anonymous"> < span class=" font - family:宋体" style=" font - family:宋体;background - color: # 333;" > < h2 class = " m-auto " > < a href = " https://hovermind.com/ " > H➲版本➾M⇡ND < / > < / h2 > < / div >

就在这个:

<div>
    <table style="width: 100%; height: 100%">
        <tr>
            <td style="width: 100%; height: 100%; vertical-align: middle;">
               What ever you want vertically-aligned
            </td>
        </tr>
    </table>
</div>

一个单元表内的div处理垂直对齐和向后兼容回石器时代!

几乎所有的方法都需要指定高度，但通常我们没有任何高度。

这里有一个css3的三行技巧，它不需要知道高度。

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

甚至在IE9中也支持它。

与其供应商前缀:

.element {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

来源:垂直对齐任何只需3行CSS

所有这些都需要在div中垂直对齐

对齐的如何?图片的顶部与文字的顶部对齐?

其中一个图像需要在div中绝对定位。

相对于DIV的绝对定位?也许你可以把你要找的东西画出来?

fd描述了绝对定位的步骤，以及调整H1元素的显示，以便图像将与它内联显示。除此之外，我还要补充一点，你可以使用vertical-align样式来对齐图像:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

.．.这将把标题和图像放在一起，顶部边缘对齐。还有其他对齐选项;请参见文档。你可能还会发现删除DIV并将图像移动到H1元素内部是有益的——这为容器提供了语义值，并消除了调整H1显示的需要:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

下面是另一种(响应性的)方法:

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

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

要将块元素定位到中心(适用于Internet Explorer 9及以上版本)，它需要一个包装器div:

.vcontainer {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}