垂直對齊DIV的內容，而無需使用行高

Question

對我來說，將DIV內部居中的唯一方法似乎是按照此處指定的行高播放： 將div的內容垂直居中

我可以將所有內容放在div中（div，span，圖像，鏈接），而我只是想將DIV的內容垂直居中。

由於什么理論原因，它不能簡單地起作用？

Answer 1

使用display: table; 並display:table-cell; 演示

<div id="coffee">
    <div class="inner">
    Free coffee for all the people who visit my restaurant
    </div>
</div>

#coffee {
    display: table;
    width: 300px;
  height: 300px;
    background-color: red;
}
#coffee .inner{
    vertical-align: middle;   
    display: table-cell;
  text-align:center;
}

Answer 2

使用帶有display的div有一個技巧：inline-block：

<div style="height:300px; background: red;"> <div style="height:100%; vertical-align:middle; background: blue;display: inline-block;">trick</div>bla bla </div>

“技巧” <div>可以為空

Jsfiddle： http : //jsfiddle.net/AqU7B/2/

Answer 3

http://jsfiddle.net/raamaragavan/79fGd/

html code goes here
<div class="box centerFlex">

 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem   Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


</div>
css code goes here
.box {
border:1px solid red;
width:100%;
height:200px;   
 }
.centerFlex {
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}