jquery - 用 jQuery 居中 div

Question

我正在尝试将一组 div(1 类)置于屏幕中央。我的问题是每个 div 都有不同的尺寸。我遵循了一些我发现的使用 jQuery 使 div 居中的准则:

$(document).ready(function () {
            $(".content").position({
                "my": "center center",
                "at": "center center",
                "of": "center center"
            });
        });

但这似乎对我不起作用: http://i.imgur.com/Znyju4z.png 我做错了什么？

HTML:

<div class="galleryarea">
        <div class="galleryframe">
            <div class="galleryentity" style="background-image:url('link_here');">
                <a href="javascript:void(0)" class="gallerylink" onclick = "document.getElementById('pic1').style.display='block';document.getElementById('fade').style.display='block'"></a>
                <div id="pic1" class="content"><img class="galleryfullsize" src="link_here"></div>
            </div>
        </div>

CSS:

.galleryentity{
    display: table;
    margin-bottom: 35px;
    float: left;
    width: 259px;
    height: 250px;
    background-color: #2B3039;
    margin-right: 30px;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 2px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 3px 5px 2px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 3px 5px 2px rgba(50, 50, 50, 0.75);
}
.white_content {
    display: none;
    position: absolute;
    margin: 0 auto;
    border: 8px solid orange;
    background-color: #eee;
    z-index:1002;
    overflow: auto;
}
.newsframe{
    display: inline-block;
    margin: 0 auto;
    max-width: 1200px;
    margin-top: 35px;
}
.newsentity{
    display: table;
    float: left;
    width: 259px;
    height: 250px;
    background-color: #2B3039;
    margin-right: 30px;
    position: relative;
    -webkit-box-shadow: 0px 3px 5px 2px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 3px 5px 2px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 3px 5px 2px rgba(50, 50, 50, 0.75);
}
.newsarea{
    width: 100%;
    min-height: 320px;
    background-color: #3F444D;
    text-align: center;
}

Answer 1

尝试这样的事情

$(".content").each(function() {
    $(this).css("position","relative");
    $(this).css("margin-left","auto");
    $(this).css("margin-right","auto");
});