Question

注意：这是一个参考问题。如果你看到适合这种模式的许多问题之一，请简单地将它们称为重复，引用这个问题。

许多访问者在提及上下文时提出问题，这里有一个解决方案：

我想在{strong>一行中n个div个，并将内容放在vertically中的horizontally和center。

垂直对齐的文字也可以是single line或段落<p> !!

Answer 1

要在一行中显示n个div个，有3种方法

使用display:table;
此方法支持IE8及更高版本，如果您有大量的CSS和文本以及div要对齐
使用float:left;
所有时间最喜欢的，旧学校的方法，这个方法是最需要考虑旧的浏览器支持，最后需要clear浮动
使用display:inline-block;
从未使用过这种方法个人浮动方法被考虑而不是我使用它

基本CSS

/************Supported by IE8 and above *******************/
 div.table {
    width:100%;        /* important */
    display:table;
    text-align:center;
}
.table-cell {
    display:table-cell;
    vertical-align:middle;
}
/************ Method 2 *******************/
 div.inline {
    width:100%;
    display:inline-block;
    text-align:center;
}
div.inline-div {
    width:32%;
    display:inline-block;
}
/************ Method 3 *******************/
 .float-class {
    width:100%;
    text-align:center;
}
div.floatdiv {
    float:left;
    width:32%;
    border:1px solid black;
}

.clearfloat {
    clear:both;
}

fiddle showing all three methods in 1 place

在div中垂直居中one line

再次3方法：
请记住，解决方案必须具有响应性，因此margin-top:25% or 50%无法正常工作 !!!

line-height
当父div的dimesnion已知时，这种方法很有用，那么你可以简单地使用技巧line-height:equal to height of parent div
position
的想法是将parent定位relative，将文本范围等级设为absolute，然后使用absolute等定位将top/bottom文本居中EM>

display:table-cell
强烈建议如果不需要IE7及更早版本的支持，只需使用vertical-align:middle;

基础css

div.fixed-div-height { height:200px; width:200px; text-align:center; } div.fixed-div-height span { line-height:200px; /* equal to height of the fixed div*/ } div.unknown-div-height { height:100%; text-align:center; position: relative; } div.unknown-div-height > span.unknown-div-margin { display:inline-block; height:20px; position: absolute; top: 50%; left:0; right:0; } div.for-ie8-and-above{ width:100%; display:table; height:400px; text-align:center; } div.for-ie8-and-above > div{ height:400px; width:100%; display:table-cell; vertical-align:middle; /* key here */ }

fiddle showing all three methods

将段落垂直居中于中心
这是棘手的部分

实际上center parapgraph height containers和height div.table-cell { height:400px; /* can be anything, even in percentage*/ width:100%; display:table-cell; vertical-align:middle; /* key here */ }是未知的，除非你为某些黑客攻击，否则无法实现display:tables {}这个黑客已经在css技巧的答案结尾引用了!!

最简单，使用：

{{1}}

fiddle showing remaining 2 possible cases

此处发布的另一个解决方案：的 How do I vertically center text with CSS?

IE浏览器{{1}}： CSS Tricks

Answer 2

我通过创建容器DIV来对齐表格单元格（td）中的多个div，如下所示：

<td>
    <div class="containingDIV"> // container DIV with CSS as below
        <div></div>
        <div></div>
        <div></div>
    </div>
</td>

其中包含DIV的css为：

.containingDIV {
    display: flex;
}

将一行中的多个div对齐并垂直和水平居中文本

2 个答案: