Question

当有多个嵌套DIV时，如何将这些DIV中的一个设置为另一个DIV的中心。

实施例：我想将$('#thiWrapper)置于$('#moveingDiv')

$('#moveingDiv').css({
       left: $('#thiWrapper).width()/2 - $('#moveingDiv').width()/2 //doesNot work
});

HTML：

<div id="thiWrapper">
   <div id="moveingDiv"></div>
</div>

CSS

#moveingDiv{
    position: relative;
}

Answer 1

正如您在评论中提到的那样，您要在元素上设置宽度，您可以使用margin: 0 auto来居中div ..

#thiWrapper {
    background: green;
}

#moveingDiv {
    position: relative;
    background: red;
    width: 50%;
  
    margin: 0 auto;
    
}

<div id="thiWrapper">
   <div id="moveingDiv">HELLO</div>
</div>

如果不是这种情况，您可以使用inline-block和text-align: center的组合......

#thiWrapper {
    background: green;
    
    text-align:center;
}

#moveingDiv {
    position: relative;
    margin: 0 auto;
    background: red;
    
    display: inline-block;
}

<div id="thiWrapper">
   <div id="moveingDiv">HELLO</div>
</div>

Answer 2

嗯，你只需仔细观察你需要的最终结果。

示例：如果您想要将#moveingDiv置于其包装器中#thiWrapper，您将需要获取包装器的宽度，减去包装器的宽度从内部div获取内部div两侧的总余量，然后将其除以2得到内部div一侧的边距宽度：

$('#moveingDiv').css({
    left: ($('#thiWrapper').width() - $('#moveingDiv').width()) / 2
});

如果您想看看，请JSFiddle。

假设您知道内部div的宽度，这在CSS中也可以通过很多方式轻松完成。以下是使用calc()：

的示例

#moveingDiv {
    position: relative;
    left: calc((100% - 100px) / 2);
    width: 100px;
}

这是JSFiddle使用它。

根据内部和外部块的display和position属性，您甚至可以做一些更简单的事情，只需设置margin: auto：

#moveingDiv {
    margin: auto;
    width: 100px;
}

这里有一个JSFiddle。

Answer 3

如果父元素（即#thiWrapper）具有设置宽度this是在div中实现水平对齐的好方法

HTML：

<div id="thiWrapper">
   <div id="moveingDiv"></div>
</div>

的CSS：

#thiWrapper{
    width:200px;
    height:200px;
    background-color:blue;
}

#moveingDiv{
    width:100px;
    height:100px;
    background-color:red;
    margin:auto;
}

如果你已经开始以编程方式实现此功能。最好的方法是创建一个包含要添加的css属性的类，并使用jQuery的addClass（）方法将该类添加到元素中。例如，您将上面示例中的css替换为下面的css。

#thiWrapper{
    width:200px;
    height:200px;
    background-color:blue;
}

#moveingDiv{
      width:100px;
    height:100px;
    background-color:red;
}

.center{
    margin:auto;
 }

然后，您可以使用以下代码以编程方式将#moveingDiv居中：

$("#moveingDiv").addClass(".center");

以编程方式取消代码中心：

$("#moveingDiv").removeClass(".center");

使用jQuery css将DIV置于另一个中心

3 个答案: