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

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/

垂直和水平对齐元素

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

引导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 >

 .outer {
   display: flex;
   align-items: center; 
   justify-content: center;
 }

就在这个:

<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处理垂直对齐和向后兼容回石器时代!

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

使用display flex，首先你需要包装你想对齐的项目的容器:

<div class="outdiv">
    <div class="indiv">
        <span>test1</span>
        <span>test2</span>
    </div>
</div>

然后在我的例子中应用下面的CSS内容来包装div或outdiv:

.outdiv {
    display: flex;
    justify-content: center;
    align-items: center;
}