Question

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

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

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

我试图实现同样的目的。我可以分配宽度和高度但是余量：auto和margin-top：auto;没有用。

如果有人可以指导我，那将非常有帮助。!!

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

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

Answer 1

你不需要jQuery来集中项目，我已经用它在我的例子中在div上添加一个类，使它从左到右：

＆＃13;

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

＆＃13;

*
{
    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%;
}

＆＃13;

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

＆＃13;

Answer 2

我在这篇文章Using jQuery to center a DIV on the screen

上找到了一个有趣的回复

希望它可以帮到你！

Answer 3

检查此演示：

http://jsfiddle.net/60c977nf/

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

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

如果你想使用jQuery本身添加样式，那么使用.css（）属性本身。

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

3 个答案: