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

我想对齐几个div's into one line并且center内容垂直 and 水平地.

要垂直对齐的文本可以是单线, or a <p>段落.

显示n个divs 排成一行,有3种方法

• use display:table;
  此方法支持 IE8 及以上版本，如果您有大量 css 和文本并且divs 对齐

• use float:left;
  一直以来最喜欢的老式方法，当必须考虑旧浏览器支持、需要时，最推荐使用此方法clear最后浮动浮动

• use display:inline-block;
  个人从未使用过此方法，我考虑了浮动方法而不是使用此方法

Base 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;
}

小提琴在 1 个位置显示所有三种方法

垂直居中one line在一个 div 中

又3种方法：
请记住，解决方案必须具有响应能力，因此margin-top:25% or 50%不会起作用!!!

• line-height
  当父 div 的尺寸已知时，这种方法很有用，那么你可以简单地使用这个技巧line-height:equal to height of parent div

• position
  想法是使parent定位relative和文本跨度类absolute，然后居中absolute使用类似定位的文本top/bottom

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

Base 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 */
}

显示所有三种方法的小提琴

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

实际上没有可能的方法center a parapgraph whose height和containers height除非您进行一些黑客攻击，否则是未知的......在这个答案的末尾引用了 css 技巧中的一个这样的黑客攻击！

最简单，使用：

div.table-cell {
    height:400px; /* can be anything, even in percentage*/
    width:100%;
    display:table-cell;
    vertical-align:middle;   /* key here */
}

小提琴显示剩余 2 种可能的情况

这里发布了另一个解决方案：如何使用 CSS 使文本垂直居中？

IE 破解display:tables : CSS 技巧