Jquery 将元素水平和垂直对齐到页面中心_Jquery_Html_Css_Vertical Alignment

Jquery 将元素水平和垂直对齐到页面中心

jquery html css

Jquery 将元素水平和垂直对齐到页面中心,jquery,html,css,vertical-alignment,Jquery,Html,Css,Vertical Alignment,我已经很久没有创建网站了，我不记得如何以正确的方式垂直对齐div。我查阅了很多在线资源，也问了很多问题，但都没有任何帮助，或者至少我没有看到我的错误在哪里我创建了一个文本，该文本在开始时是隐藏的，在一段时间后会出现，并使用jQuery进行缩放。它似乎起作用了，它是水平居中的，但不是垂直居中的。如何将其与页面中心垂直对齐 HTML <!DOCTYPE html> <head> <meta charset="utf-8" /> <link href="ma

我已经很久没有创建网站了，我不记得如何以正确的方式垂直对齐div。我查阅了很多在线资源，也问了很多问题，但都没有任何帮助，或者至少我没有看到我的错误在哪里

我创建了一个文本，该文本在开始时是隐藏的，在一段时间后会出现，并使用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>

jsidle示例：

使用CSS 下面的链接提供了垂直居中的五种方法，每种方法的优缺点，以及如何实现每种方法。我建议你复习一下这一页

使用jQuery 提供动态jQuery解决方案

工作小提琴：

其他可能的解决办法：

然后可以使用

$（'.classname'）.vAlign（）

或

$（'#image'）.vAlign（）–确保在文档完成后使用此选项
已加载，在$（document）.ready（function（）{}）
中

您搜索过吗？使用你的标题：是的，我搜索过。我说，使用stackoverflow上已经给出的一些答案，我无法解决这个问题。可能是出了什么问题，我现在看不出来。如果有人能帮我修复，我将不胜感激。谢谢，jquery的解决方案很有效。我更喜欢只使用CSS的解决方案，而不使用javascript/jquery来垂直对齐页面中心。“垂直对齐：中间；”属性似乎不起作用，我以前试过。你已经在使用jQuery了，所以不知道为什么要经历不只使用CSS的痛苦。我将仅尝试创建CSS解决方案。而且，它不像你想的那样工作。我建议您仔细阅读。@Fabio如果您仍然无法使用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;
}

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();
});

(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);