如何在div中垂直对齐元素？

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

我有一个带两个图像的div和一个h1 。它们都需要在div内垂直对齐，彼此相邻。

其中一张图片必须absolute位于div内。

要在所有常见的浏览器上运行，需要什么CSS？

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

#1楼

我的一个朋友的技术：

HTML：

<div style="height:100px; border:1px solid;">
    <p style="border:1px dotted;">I'm vertically centered.</p>
</div>

CSS：

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}
div p {display:inline-block;}

在这里演示

#2楼

我使用了以下非常简单的代码：

HTML：

<div class="ext-box">
    <div class="int-box">
        <h2>Some txt</h2>
        <p>bla bla bla</p>
    </div>
</div>

CSS：

div.ext-box { display: table; width:100%;}
div.int-box { display: table-cell; vertical-align: middle; }

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

#3楼

只是这个：

<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内的一个单元格表格可以进行垂直对齐，并且可以向后兼容Stone Stone！

#4楼

只需在div中使用一个单元格表格！只需将单元格和工作台的高度设置为100％，就可以使用垂直对齐。

div内的一个单元格表格可以进行垂直对齐，并且可以向后兼容Stone Stone！

#5楼

这只是另一种（响应）方法：

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/

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3145975

标签

div

table