如何verticalyalignment到具有定义的宽度/高度的div的内容的中心？
什么是正确的方法垂直中心定义的宽度/高度div任何内容。
在这个例子中 ，有两个高度不同的内容，使用class .content垂直居中的最好方法是什么。 （它适用于每个浏览器，并没有table-cell的解决scheme）
心中有一些解决方法，但想知道其他的想法，一个是使用position:absolute; top:0; bottom: 0; position:absolute; top:0; bottom: 0; 和margin auto 。
我已经研究了这一点，从我发现你有四个select：
版本1：显示为表格单元格的父div
如果您不介意在父div上使用display:table-cell ，则可以使用以下选项：
.area{ height: 100px; width: 100px; background: red; margin:10px; text-align: center; display:table-cell; vertical-align:middle; }
现场演示
版本2：父div与显示块和内容显示表格单元格
.area{ height: 100px; width: 100px; background: red; margin:10px; text-align: center; display:block; } .content { height: 100px; width: 100px; display:table-cell; vertical-align:middle; }
现场演示
版本3：父div浮动和内容div作为显示表格单元格
.area{ background: red; margin:10px; text-align: center; display:block; float: left; } .content { display:table-cell; vertical-align:middle; height: 100px; width: 100px; }
现场演示
版本4：与内容位置绝对相对的父级div位置
我对这个版本唯一的问题是，你似乎必须为每个特定的实现创buildCSS。 原因是内容div需要有你的文本将被填充的高度，而margin-top将被计算出来。 这个问题可以在演示中看到。 您可以通过手动改变内容div的高度％并将其乘以-.5来获得您的边际值。
.area{ position:relative; display:block; height:100px; width:100px; border:1px solid black; background:red; margin:10px; } .content { position:absolute; top:50%; height:50%; width:100px; margin-top:-25%; text-align:center; }
现场演示
我在本文中find了这个解决scheme
.parent-element { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .element { position: relative; top: 50%; transform: translateY(-50%); }
如果元素的高度不固定，它就像一个魅力。
保证金：all_four_margin
通过提供50％的all_four_margin将元素放置在中心
style="margin: 50%"
你也可以申请跟随
保证金：右上方左下angular
保证金：右上和左下
保证金：上下左右
通过给予适当的％，我们就可以得到我们想要的元素。
