Div内容对齐查询

Question

  

可能重复：
  Vertically align div (no tables)

我有一个div，我希望调整此div中的所有内容 - 目前h1标记垂直居中，我该怎么做？

HTML：

<div>
   <h1>Content</h1>
</div>

CSS：

div{
  width:100%;
}
div h1{
  margin:0 auto;
}

Answer 1

我认为没有用于垂直居中DIV容器的跨浏览器解决方案，但是有一个jQuery插件可以让你这样做：

(function ($) {
// VERTICALLY ALIGN FUNCTION
$.fn.vAlign = function() {
return this.each(function(i){
var ah = $(this).height();
var ph = $(this).parent().height();
var mh = (ph - ah) / 2;
$(this).css('margin-top', mh);
});
};
})(jQuery);

然后你可以添加这个Javascript：

$(document).ready(function() {
$('div h1').vAlign();
});