圆形div，垂直和水平居中对齐答案

【问题标题】：Circular div, vertical and horizontal center alignment圆形div，垂直和水平居中对齐
【发布时间】：2013-07-13 17:35:43
【问题描述】：

我有以下代码：

<!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 垂直和水平显示在父级的中间？

请帮忙...

提前谢谢你！

【问题讨论】：

标签： html css alignment

【解决方案1】：

如果您打算保持相同的尺寸，只需将填充添加到#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

【讨论】：

没有冒犯答案，但这在技术上是一种不正确的解决方案

【解决方案2】：

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

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% 并且否定@987654329 的1/2 @ 和 width 从内部 div 将其定位在容器元素的确切中心。

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

【讨论】：

不，但是我正在为我的视频播放器设计播放头，小播放头是不可能的
@tenstar 你应该看看font awesome :)