Question

未知高度的DIV内文字垂直居中用CSS怎么实现

<div id="NO1" style="width:50%;height:20%;">
请问用CSS怎么让我垂直居中在这个div中？
</div>

Answer 1

1. 利用vertical-align:middle和dispaly: table在高级版本的浏览器实现效果

2. 布局div：

   
   

   

   未添加样式的效果图：

   
   

3. 

   添加CSS样式效果：

   
   

   

4. 最终实现的效果：

   
   

   
   

5. 

   在IE6 7 下的方案 ：

/*IE6*/
*html .wrapper{position:absolute;top:50%;width:100%;text-align:center;display:block;height:auto}
*html .subwrap{position:relative;top:-50%;text-align:center;}

/*IE7 可以合并 但是为了更好说明 没有合并*/
*+html .wrapper{position:absolute;top:50%;width:100%;text-align:center;display:block;height:auto}
*+html .subwrap{position:relative;top:-50%;text-align:center;} 

Answer 2

用表格，或者把div改成display：table-cell； 然后vertical-align：middle
就好了

Answer 3

padding 也用百分比

追问

您是说这样？
#NO1{
padding:50% 0;

}

追答

是的

追问

没用的，因为我的DIV的高度也是百分比，设置百分比的padding只会使DIV的高度变成100%〒_〒

追答

你的高度为什么是未知的？