我的技巧是在div里面放一个表，一行一列，设置100%的宽度和高度，属性vertical-align:middle:

<div>

    <table style="width:100%; height:100%;">
        <tr>
            <td style="vertical-align:middle;">
                BUTTON TEXT
            </td>
        </tr>
    </table>

</div>

小提琴: http://jsfiddle.net/joan16v/sbqjnn9q/

所有这些都需要在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>

我已经使用以下解决方案(没有定位和线高)一年多了，它适用于Internet Explorer 7和Internet Explorer 8。

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>

垂直和水平对齐元素

使用它们中的任何一个。结果是一样的:

引导4 CSS3

1. 引导4.3 +

垂直对齐:d-flex align-items-center

水平对齐:d-flex justify-content-center

垂直和水平对齐:d-flex align-items-center justify-content-center

.container { 身高:180 px; 宽度:100%; background - color: blueviolet; ｝ .container > div { 背景颜色:白色; 填充:1快速眼动; ｝ <链接的href = " https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css " rel = "样式表" / > <div class="d-flex align-items-center - align- content-center container"> <div>我在中心</div> < / div >

2. CSS 3

.container { 身高:180 px; 宽度:100%; background - color: blueviolet; ｝ .container > div { 背景颜色:白色; 填充:1快速眼动; ｝ .center { 显示:flex; 对齐项目:中心; justify-content:中心; ｝ <div class="集装箱中心"> <div>我在中心</div> < / div >

对我来说，它是这样工作的:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

“a”元素转换为按钮，使用Bootstrap类，它现在垂直居中在一个外部的“div”。

现在Flexbox的支持正在增加，这个CSS应用到包含元素将垂直居中所有包含的项目(除了那些指定对齐本身的项目，例如align-self:start)

.container {
    display: flex;
    align-items: center;
}

如果你还需要针对ie10和更老版本(< 4.4 (KitKat))的Android浏览器，请使用带前缀的版本:

.container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}