浮动 div 垂直对齐 div [重复]答案

【问题标题】：Float div vertical align div [duplicate]浮动 div 垂直对齐 div [重复]
【发布时间】：2012-06-13 17:37:27
【问题描述】：

可能重复：
Best practice vertical-align center content on div

如何使用相同的 CSS 垂直对齐两个正方形的中心 .content。

Example

谢谢

【问题讨论】：

你在这里问过同样的问题：stackoverflow.com/questions/10968726/…
我不明白预期的结果是什么...
我想垂直对齐 .content ，但由于我添加了 float: left，停止工作
您的问题应该是完全独立的。否则，当 URL 失效时，它就没用了。其次，请不要多次发布same question。
我想删除..不幸的是我不能。

标签： html css css-float vertical-alignment

【解决方案1】：

这是解决方案 -> http://jsfiddle.net/Sha6m/12/。

您需要将display: table-cell; 添加到内部.content，将他们的 垂直对齐设置为中间（vertical-align: middle;）并给他们相同的height 和width 他们的父母.area（很遗憾，100% 的宽度和高度在这里不起作用，因此当您更改.area 的高度和宽度时，您还必须为 .content div 执行此操作）。

【讨论】：

【解决方案2】：

style='vertical-align:middle' ..

【讨论】：

查看示例，它可以在没有 FLOAT 的情况下工作，但想知道如何使用 Float。
mm.. margin-top？看看
但这并不是一个通用的css来应用到div.content

【解决方案3】：

您将display table-cell 应用于错误的元素。您必须将它们包装在一个容器中，并将display: table cell 应用于该容器。检查我的例子 -> http://jsfiddle.net/Sha6m/10/

【讨论】：

谢谢，但我希望 div.content 垂直居中而不是红色方块。
@RicardoRodrigues 红色方块不是 .content 吗？嗯...也许你想回顾一下你的问题：-/
.content for the two squares -->它在问题中表示垂直对齐 .content for the two squares

【解决方案4】：

当你得到一个固定的高度时，我会添加一个 line-height: 100px; 并删除你的 vertical-align 和 display

jsfiddle modification

【讨论】：