Question

对我而言，在DIV中居中的唯一方法是在这里指定的行高：center vertically the content of a div

，这似乎很奇怪。

我可以拥有div中的所有内容（div，span，images，link），我只想垂直居中DIV的内容。

由于理论上的原因，它不仅仅起作用？

Answer 1

使用display: table;和display:table-cell; demo

<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

使用带显示的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;
}

垂直对齐DIV的内容而不使用行高

3 个答案: