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

Answer 2

如果您只需要水平中心，请使用margin: 0 auto;

否则，使用jQuery来计算它：

$('.center').css({
   'position: relative',
   'margin': '0 auto',
   'top': parentHeight - selfHeight / 2
});

JSFiddle

Answer 3

当项目显示时，

margin: 0 auto起作用：block;并且它的父母更大＆amp; position:relative

我立即看到的问题：

你有一些余量：0自动显示：内联块无效。
onclick事件中的javascript似乎很乱，请使用.addClass代替
您正在使用position:absolute

居中

<div style="width: 100%">
    <div style="margin: 0 auto; width:300px; display: block;">  <!-- centered-->

不居中：

<div style="width: 100%">
    <div style="margin: 0 auto; width:300px; display: inline-block;">  <!-- broken-->

另外，为什么不使用.addClass和jQuery来应用新的样式规则？它可能会更好。

如果你想要一个居中的模态窗口：

<div class="modalBackground">
    <div class="centered-image">
    </div>
</div>

的CSS：

body.modalBackground { position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:9999}
.centered-image { position:relative; margin:0 auto; display:block; }

如果你想要所有居中的3张图片：

宽<div>宽度100％
作为保证金的子<div>：0 auto，width：auto。
显示的儿童图像<div>：内联块，宽度：自动。

使用jQuery中心div

3 个答案: