如何使用 Jquery 在页面中心对齐 div？

Question

我使用下面的 css 代码将我的 div 定位在页面的中心：

.content{
 width:1000px;
 height:600px;
 margin:auto;
 margin-top:auto;
}

我的要求：
我想使用 JQuery 在 $(document).ready(function () {} 中实现上述内容。最初我将分配 div 负位置并将其隐藏。然后在 document.ready 中我想显示它并为 div 分配设置动画以上属性。

我尝试实现相同的功能。我可以指定宽度和高度，但 margin:auto 和 margin-top:auto;不工作。

如果有人可以指导我会非常有帮助..!!

这就是我正在做的事情：
http://jsfiddle.net/rgd9mwjz/

我需要看到 div 从 -5550px 移动到 div 中心的动画。如何做到这一点？

Answer 1

查看此演示：

http://jsfiddle.net/60c977nf/

$(document).ready(function()
{
   $('.content').css('display','block'); 
   $('.content').addClass('other_properties');
});

我在文档就绪状态下向 div .content 添加了一个新类，并在 css 文件中指定了新样式。这将使您更容易使用 css 文件本身编写新样式。

如果您想使用 jQuery 本身添加样式，请使用 .css() 属性本身。

Answer 2

您不需要 jQuery 来使项目居中，我在示例中使用它在 div 上添加了一个类，使其从左到右：

$(function() {
    $("div").addClass("shown");
});

*
{
    margin: 0;
    padding: 0;
}

html, body
{
    height: 100%;
}

div
{
    top: 50%;
    left: -50%;
    background: darkred;
    width: 100px;
    height: 100px;
    position: relative;
    transform: translate(-50%, -50%);
    -moz-transition: .5s ease;
    -webkit-transition: .5s ease;
}

div.shown
{
    left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

Answer 3

我在这个帖子Using jQuery to center a DIV on the screen找到了一个有趣的回复

希望对你有帮助！