Question

我有以下代码：

<!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>

以下是它的样子：

output

如何使内部div显示在父级的中间，垂直和水平？

请帮忙......

提前谢谢！

Answer 1

您使用的尺寸非常小，因此为了演示目的，我按比例增加了尺寸

Demo

#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%从内部height取消width和div的1/2，将其放置在容器元素的确切中心。

注意：您使用的是非常小的px尺寸，因此我建议您这样做将其向上舍入为8或6，这样您就可以轻松地否定尺寸。你也在用 1px边界，也应该考虑

Answer 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

圆形div，垂直和水平中心对齐

2 个答案: