将元素水平和垂直对齐到页面的中心[重复]答案

【问题标题】：Align element horizontally and vertically to the center of the page [duplicate]将元素水平和垂直对齐到页面的中心[重复]
【发布时间】：2014-01-22 06:05:29
【问题描述】：

很久没做网站了，不记得如何正确垂直对齐 div 了。我检查了许多在线资源和 stackoverflow 问题，但没有任何帮助，或者至少我没有看到我的错误在哪里。

我创建了一个文本，该文本在开始时是隐藏的，一段时间后会出现，并且使用 jQuery 会越来越大。它似乎有效，它水平居中但不是垂直居中。如何垂直对齐页面中心？

HTML

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link href="main.css" rel="stylesheet" />
<title>Homepage</title>
<script src="jquery-2.0.3.min.js"></script>
</head>
<body>
<div id="container" align="center">
<p id="robo">ROBO</p>
</div>
<script>
$(document).ready(function() {
    $("#robo").delay(500).fadeIn(500).animate({fontSize: "3em"}, 1000);
}); 
</script>

</body>
</html>

CSS

*{
    margin: 0px;
    padding: 0px;
}
body {
    text-align: center;
    width: 100%;
}
#container {
    width: 1024px;
    height: 768px;
    margin: 0 auto;
}
#robo {
  display:none;
  width:200px;
  height:200px;
}

JSFiddle 示例：http://jsfiddle.net/sMrL9/

【问题讨论】：

你搜索了吗？使用您的标题：stackoverflow.com/…
是的，我搜索过。我说使用stackoverflow上已经给出的一些答案我无法解决问题。可能有什么问题我暂时看不到。如果有人可以帮助我修复它，我将不胜感激。

标签： jquery html css vertical-alignment

【解决方案1】：

使用 CSS

下面的链接提供了五种垂直居中的方法，每种方法的优缺点，以及如何实现每种方法。我建议查看该页面。

http://www.vanseodesign.com/css/vertical-centering/

使用 jQuery

This SO answer 提供动态 jQuery 解决方案。

工作小提琴：http://jsfiddle.net/sMrL9/1/

jQuery.fn.verticalAlign = function ()
{
    return this
            .css("margin-top",($(this).parent()
            .height() - $(this).height())/2 + 'px' )
};

$(document).ready(function() {
    $("#robo").delay(500)
              .fadeIn(500)
              .animate({fontSize: "3em"}, 1000)
              .verticalAlign();
});

其他可能的解决方案：

Centering a div vertically & horizontally using jQuery
How do I vertical center text next to an image in html/css?

http://atomiku.com/2012/02/simple-jquery-plugin-for-vertically-centering/

(function ($) {
        // VERTICALLY ALIGN FUNCTION
        $.fn.vAlign = function() {
            return this.each(function(i){
            var ah = $(this).height();
            var ph = $(this).parent().height();
            var mh = Math.ceil((ph-ah) / 2);
            $(this).css('margin-top', mh);
            });
        };
    })(jQuery);
然后您可以使用$(‘.classname’).vAlign(); 或$(‘#image’).vAlign(); – 确保在文档包含已加载，在$(document).ready(function(){})内！

【讨论】：

谢谢，使用 jquery 的解决方案有效。我更喜欢仅使用 CSS 的解决方案，而不使用 javascript/jquery 垂直对齐到页面中心。 “垂直对齐：中间；”属性似乎不起作用，我之前尝试过。
您已经在使用 jQuery，所以不知道为什么要忍受不使用 CSS 的痛苦。我将尝试只创建一个 CSS 解决方案。此外，vertical-align 不像您想象的那样工作。我建议阅读它。
@Fabio 如果您仍然无法让 CSS 解决方案发挥作用，请告诉我。