另一个中的中心元素，而父指定位置：绝对？

Posted 2023-03-05

【中文标题】另一个中的中心元素，而父指定位置：绝对？

【英文标题】：center element within another, while parent specifies position: absolute?

【发布时间】：2013-04-02 21:41:05

【问题描述】：

我正在使用这个 JS Fiddle：http://jsfiddle.net/BY3tz/1/

请注意，当您从 dotParent CSS 类中删除 position、left 和 top 属性时，黑点在框内居中。

我正在寻找一种方法来保持黑点居中（垂直和水平），同时保留上面提到的 3 个属性，以便我可以更改 left 和 top属性将框定位在任何地方，黑点将保持居中。

这可能吗？谁能看到我的dot 课程做错了什么？

【问题讨论】：

最初 vertical-align 之所以起作用，是因为 display: table-cell。当您添加position: absolute 时，它会失去与table-cell 相关的属性，因此点会朝顶部移动（不是垂直居中）

感谢@Ejay 的解释。这现在更有意义了。

【参考方案1】：

对.dot 类的一些调整：

.dot 
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50px;
    margin-left: -5px; // Half of the width * (-1)
    margin-top: -5px; // Half of the height * (-1)
    top: 50%;
    left: 50%;
    background: #000;
    -webkit-border-radius: 50px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;

http://jsfiddle.net/BY3tz/2/

【讨论】：

我还有一个小问题。看看这个小提琴，jsfiddle.net/GFHTB/3，是否可以在 离开 position: absolute 时将文本放回内部 content div？请注意，如果没有 position 属性，它是如何工作的。

【参考方案2】：

将 dotParent div 中的位置属性更改为“相对”。由于它是父级 Div，因此需要将其定位为相对，以便其子级将其作为参考点。

.dotParent 
    position: relative;
    top: 150px;
    left: 50px;
    height: 68px;
    width: 68px;
    border: 1px solid Black;

http://jsfiddle.net/BY3tz/6/

【参考方案3】：

添加了点包装，所以.dot 是相对于新包装的，

<div class="dotParent">
    <div class="dot-wrapper">
        <div class="dot"></div>
    </div><!-- end dot-wrapper -->
</div>

新样式。

.dot-wrapper 
    position:relative;
    width:100%;
    height:100%;

添加到 .dot 类

.dot 
    position:absolute;
    top:45%;
    left:45%;

http://jsfiddle.net/BY3tz/5/

【讨论】：

谢谢！虽然这也很有效，但我想我会选择@Kaloyan Ivanov 的解决方案，因为它不需要额外的 html 和额外的 CSS 类。