Question

我有绝对定位的div，我必须垂直居中他的内容。任何解决方案？

更新我的内容被旋转（通过css3）图像，此图像已经水平定位。

  <div style="width:200px;height:100px;background:black;position:absolute;">
        <img src="a.png" style="width:100px;-webkit-transform: rotate(45deg);margin-left:auto;margin-right:auto; display:block"/>
    </div>

Answer 1

dh = your div's height
yourDiv.style.top = window.innerHeight/2-dh/2

这是最大的，你将得到没有细节。

修改：知道内容为图片后。

首先方式，如果你已经知道了div和img两个高度。

 <div style="width:200px;height:200px;background:black;position:absolute;">
        <img src="a.png" style="width:100px;-webkit-transform: rotate(45deg);margin-left:auto;margin-right:auto; display:block"/>
    </div>

和图像样式

img{margin-top:23%;}

随意使用它：http://jsfiddle.net/DZBp8/

第二种方式：一些jQuery，正如我已经回答的那样。 HTML： jQuery的：

var dh = $('#container').height();
var ih = $('img').height();
$('img').css('margin-top',(dh-ih)/2+'px');

http://jsfiddle.net/DZBp8/1/

Answer 2

这可能有效：

 <!-- This method is for for modern browsers only -->
<html>
<head>
<title>Vertical Centering</title>
<style>
.parent {
  display: table;
  height: 400px;
  width: 400px;
  background-color: green;
}
.content {
  display: table-cell;
  vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<div class="content">
      This content will be vertically centered in the parent element.
</div>
</div>
</body>
</html>

见Working example at jsfiddle。您可以解决它并获得解决方案。希望这会有所帮助。

绝对div中的垂直居中

2 个答案: