这招对我很管用:

.vcontainer {
    min-height: 10em;
    display: table-cell;
    vertical-align: middle;
}

我的技巧是在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>

这是我个人的解决方案的i元素在一个div。

JSFiddle例子

HTML

<div class="circle">
    <i class="fa fa-plus icon">
</i></div>

CSS

.circle {
   border-radius: 50%;
   color: blue;
   background-color: red;
   height:100px;
   width:100px;
   text-align: center;
   line-height: 100px;
}

.icon {
  font-size: 50px;
  vertical-align: middle;
}

我使用了这段非常简单的代码:

Div.ext-box{显示:表;宽度:100%;} Div.int-box{显示:表单元;vertical-align:中间;｝ < div class = " ext-box”> < div class = " int-box”> 一些txt < h2 > < / h2 > <p>bla bla bla</p> < / div > < / div >

显然，无论您使用.class还是#id，结果都不会改变。

在父div中创建中央子div的三种方法

绝对定位法 Flexbox方法 变换/翻译方法

Demo

/* Absolute Positioning Method */ .parent1 { background: darkcyan; width: 200px; height: 200px; position: relative; } .child1 { background: white; height: 30px; width: 30px; position: absolute; top: 50%; left: 50%; margin: -15px; } /* Flexbox Method */ .parent2 { display: flex; justify-content: center; align-items: center; background: darkcyan; height: 200px; width: 200px; } .child2 { background: white; height: 30px; width: 30px; } /* Transform/Translate Method */ .parent3 { position: relative; height: 200px; width: 200px; background: darkcyan; } .child3 { background: white; height: 30px; width: 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } <div class="parent1"> <div class="child1"></div> </div> <hr /> <div class="parent2"> <div class="child2"></div> </div> <hr /> <div class="parent3"> <div class="child3"></div> </div>