Question

html块级元素垂直居中的方法

我想要的效果是一个小窗体在屏幕中央，用了两个div
外面一层的样式 width:100%;height:100%;position:absolute;top:0;left:0;display:table
里面一层的样式width:400px;height:300px;display:table-cell;vertical-align:middle;margin:0 auto
实际出来的效果是里面一层完全占满了屏幕
求解

Answer 1

display:table-cell;vertical-align:middle;
这个表示显示为表格模式的，，然后表格内居中，所以你应该吧这个放到外层div试试才对~~

或者干脆
外面一层的样式 width:100%;height:100%;position:relative;top:0;left:0;
里面一层的样式width:400px;height:300px;position:absolute;left:50%;top:50%; margin-left:-200px;margin-top:-150px;
这样~~

刚去百度了下，内层是块的好像只能用我说的定位方法，如果内层是行内元素未知垂直居中使用你说的这个就成，具体戳下面地址：
http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html

Answer 2

display:table-cell 元素生成的匿名table默认table-layout:auto。宽度将基于单元格内容自动调整。所以你设置宽度是没有什么意义的。在屏幕中垂直居中最好还是用js计算解决。

Answer 3

position:absolute;这句删了试试