html - css按中心定位

Question

我有很多具有已知 x,y 坐标的可拖动子级的父框。问题是通过 center来定位孩子，而不是左上角。儿童boxen的尺寸是自动的。

有没有办法实现这一点，而无需在每次调整父母和孩子的大小时重新计算 javascript 位置？

PS jquery-ui 具有插件“位置”，在使用类似时主要完成所需的操作

child.position({ my: center, at: left top, of: parent, offset: x y})

但是插件以像素为单位计算位置，我更喜欢使用 % 以便父级调整大小不会涉及重新定位所有子级。

Answer 1

您可以使用死点中心。

CSS：

#horizon        
{
    color: white;
    background-color: transparent;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
    visibility: visible;
    display: block
}

#content    
{
    font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: transparent;
    margin-left: -125px;
    position: absolute;
    top: -35px;
    left: 50%;
    width: 250px;
    height: 70px;
    visibility: visible
}

演示： http: //www.wpdfd.com/editorial/thebox/deadcentre4.html