这招对我很管用:

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

这招对我很管用:

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

哇，这个问题很受欢迎。这是基于对垂直对齐属性的误解。这篇优秀的文章解释了这一点:

理解垂直对齐，或者Gavin Kistner的“如何(不)垂直居中内容”。

“如何在CSS中居中”是一个很好的网络工具，它可以帮助您在不同的情况下找到必要的CSS居中属性。

简而言之(并防止链接腐烂):

Inline elements (and only inline elements) can be vertically aligned in their context via vertical-align: middle. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. jsfiddle example For block elements, vertical alignment is harder and strongly depends on the specific situation: If the inner element can have a fixed height, you can make its position absolute and specify its height, margin-top and top position. jsfiddle example If the centered element consists of a single line and its parent height is fixed you can simply set the container’s line-height to fill its height. This method is quite versatile in my experience. jsfiddle example … there are more such special cases.

只使用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 >

现在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;
}

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