这将是垂直居中在限定的宽度/高度的任何内容的正确方法div。
div
在示例中,有两个具有不同高度的内容,什么是使用class垂直居中的最佳方法.content?(并且适用于所有浏览器,而没有的解决方案table-cell)
.content
table-cell
想到了一些解决方案,但想知道其他想法,一个正在使用position:absolute; top:0; bottom: 0;和margin auto。
position:absolute; top:0; bottom: 0;
margin auto
我对此进行了一些研究,从中发现您有四个选择:
如果您不介意display:table-cell在父div上使用,则可以使用以下选项:
display:table-cell
.area{ height: 100px; width: 100px; background: red; margin:10px; text-align: center; display:table-cell; vertical-align:middle; }
.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; }
.area{ background: red; margin:10px; text-align: center; display:block; float: left; } .content { display:table-cell; vertical-align:middle; height: 100px; width: 100px; }
我使用该版本的唯一问题是,似乎您将不得不为每个特定的实现创建css。原因是内容div需要具有您要填充的文本的设置高度,并且要从中确定页边距的顶部。在演示中可以看到此问题。您可以通过更改内容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; }