0

我有以下代码：

<!DOCTYPE html>
<html>
<head>
<style>
#playhead-outercircle{
width:10px;
height:10px;
border-style:solid;
border-width:1px;
border-radius:100px;
cursor:pointer;
}
#playhead-innercircle{
width:7px;
height:7px;
border-style:solid;
border-width:1px;
border-radius:100px;
cursor:pointer;
}
</style>
</head>
<body>
<div id="playhead">
<div id="playhead-outercircle"><div id="playhead-innercircle"></div></div>
</div>
</body>
</html>

这是它的样子：

输出

如何，我如何使内部 div 垂直和水平地出现在父级的中间？

请帮忙...

先感谢您！

4

2 回答 2

2

您使用的尺寸非常小，因此出于演示目的，我已按比例增加它

演示

#playhead-outercircle{
    width:100px;
    height:100px;
    border-style:solid;
    border-width:1px;
    border-radius:100px;
    cursor:pointer;
    position: relative;
}

#playhead-innercircle{
    width:70px;
    height:70px;
    border-style:solid;
    border-width:1px;
    border-radius:100px;
    cursor:pointer;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -35px;
    margin-top: -35px;
}

解释：

我们position: relative;将容器用于容器div ，这样它就absolute div不会在野外展开，而不是我们使用并从内部left, top 50%否定和的 1/2 以将其定位在容器元素的确切中心。heightwidthdiv

注意：您使用的px尺寸非常小，因此我建议您将其四舍五入为 8 或 6，以便您可以轻松地否定尺寸。此外，您正在使用 1px边框，也应该考虑

于 2013-07-13T09:26:47.697 回答
2

如果您打算保持相同的尺寸，只需添加填充到#playhead-outercircle

#playhead-outercircle {
   width:10px;
   height:10px;
   border-style:solid;
   border-width:1px;
   border-radius:100px;
   cursor:pointer;
   padding: 1px 0 0 1px;
}

演示- jsFiddle

于 2013-07-13T09:34:16.770 回答