更新

Question

看到这个Fiddle，如何在父母和孩子中没有固定宽度和高度的蓝色div居中？

这是在SO中发布的

<div class="parent">
<div class="child">
</div>
</div>

更新

这些是定位元素，我希望孩子位于屏幕的中心。

更新2

看到它居中here，但我不能在父母和儿童中使用固定宽度和高度。我需要定位元素，因为我需要它们超过其他元素。

Answer 1

要使div居中，您只需添加此属性：

margin-left: auto;
margin-right: auto;

或更精简的版本（假设顶部和底部边距为0px）：

margin: 0px auto;

这假设您想要居中的元素具有某种宽度值，无论是固定还是百分比。你不应该在父母那里需要任何东西来决定孩子的边缘。

Answer 2

保证金：-50％; / *为什么这需要父母的宽度???? * /

这是因为你的父div有position: fixed而你的子div有position: absolute，因为绝对位置元素相对于第一个具有静态位置的父元素而定位。

因此，您的子div将使用左边距和边距，其值等于父宽度-50%的{{1}}

Answer 3

试试这个，它显示在宽度的中心。

<div class="parent">
<div class="child">
</div>
</div>
<style type="text/css">
.parent{
}
.child{
    background: none repeat scroll 0 0 lightblue;
    height: 50px;
    margin: 0 auto;
    width: 150px;
}
</style>

Answer 4

我认为这可以解决您的问题，但这需要JQuery[.width()]。

.parent{
    position: fixed;    
    /* I can't use static width nor height, TO DELETE(try changing this)*/
    width: 500px;
    height: 400px;
    background: red;    
}

.child{
    display: inline-block;
    position: absolute; 
    /*Simulate width and height, these are actually calculated by content*/
    width: 100px;
    height:50px;
    background: lightblue;   
}

JQuery onLoad：[ JSFiddle ]

$(function changePostion() {
    var s = $(".parent").width(); 
    var e = $(".child").width();   
    var d= (s-e)/2;
    $(".child").css({"left":d}); 
    var sh = $(".parent").height(); 
    var eh = $(".child").height(); 
    var dh= (sh-eh)/2;
    $(".child").css({"top":dh});    
});

这个article是在中心定位html属性的最佳教程。如果不使用JQuery，可能有更好的方法。

Answer 5

动态模态可能是世界上最大的痛苦。你需要JS来改变高度和宽度。你能用插件吗？如果是这样，这里有一些不错的选择Twitter bootstrap有一个很容易设置的模态，但是通过ajax和iframe加载div很有挑战性。你必须选择其中一个。 simplemodal（http://www.ericmmartin.com/projects/simplemodal/）很好，但你仍然需要自己做很多工作。它适用于iframe和ajax内容。

定位时居中模态或div

更新

更新2

5 个答案: