Question

我有一个父div，里面有一个子div

CSS

.parent {
    background-color: red;
    width: 500px;
    height: 300px;
    margin: 0 auto;
}
.child {
    background-color: yellow;
    width: 200px;
    height: 100px;
}

现在我想在没有改变宽度和高度的情况下将孩子设置在父母的中间，我该怎么做？感谢。

Answer 1

这是一个解决方案，我不确定它是否符合您的需求：

.parent {
    background-color: red;
    width: 500px;
    height: 300px;
    margin: 0 auto;
}

.child {
    background-color: yellow;
    width: 200px;
    height: 100px;
    /* changes */
    top: 100px;
    position: relative;
    margin: 0 auto;
}

Demo

Answer 2

这似乎是你想要的想法

http://jsfiddle.net/kbPV7/7/

.parent {
    background-color: red;
    width: 500px;
    height: 300px;
    margin: 0 auto;
    position:relative;
    display:block;

}
.child {
    background-color: yellow;
    width: 200px;
    height: 100px;
    position:absolute; top:50%; margin-top:-50px;
    left:50%; margin-left:-100px;
}

Answer 3

我自己弄清楚，我只需要定位：溢出;父母，然后有一些边缘的东西，我们可以把孩子放在中间。

我想在另一个具有固定宽度和高度的方块中设置一个正方形

3 个答案: