Html 以中心为参考点定位div？

我有一个具有动态文本内容的div。文本量在一个单词和五个或十个单词（大字体）之间变化。现在，它绝对是从相对定位的父对象的底部和右侧定位了一些量

然而，由于内容是动态的，当有时有更多的文本并且文本深入父对象的主区域时，它看起来很尴尬。这是因为现在div的参考点是它的右下角是否可以如上所述，以中心作为参考点进行定位？

父容器的样式与普通容器一样，具有

position:relative和
100%宽度和高度

子容器的CSS也是相当标准的：

position: absolute;
bottom: 33%;
right: 33;

我试过使用width、max width和min width，但结果仍然不理想
这个怎么样？使用下面的CSS比较这两个小提琴&

HTML

<div id="parent">
    <div id="anchor">
        <div id="child">
            <h1>Some text</h1>
        </div>
    </div>
</div>

你能为我们提供你当前的CSS样式吗？你是如何设置内部div的尺寸的？@koala_dev我在上面做了一些编辑，但不确定是否会有多大帮助。现在事情很简单。我尝试过使用填充、边距和宽度，但事情变得复杂/混乱，我无法得到想要的内容。你想随着更多内容的添加，潜水从中心>向外扩展吗？@Vector是的，我没有这样想，但我想这和我想要的是一样的！谢谢考拉，你是这里真正的英雄：）虽然不完美，但在我的情况下，这是令人满意的，添加了
margin-bottom:-X%也是。实际上，我尝试了使用
#anchor
div的这种方法，除了
#child
我使用了
位置：relative和
左侧：%
和
顶部：Y%，但这不起作用。。。。我想知道为什么负边距会起作用，但不会
top
或
left
…所以我用你的方法做了一个测试，它似乎也很有效，你看，唯一的问题是，右和左使用百分比值似乎没有问题，但顶部和底部不知道如何使用它们，你需要一个固定的单位值，嗯，是的，我真的认为这就是我观察到的问题，我只是没有意识到它特别是
top
和
bottom
不起作用。这太奇怪了，
top
和
bottom
不起作用，而
right
和
left
却起作用。。。。。
#parent {
    position: relative;
    width: 100%;
    height: 100%;
}
#anchor {
    position: absolute;
    right: 33%;
    bottom: 33%;
}
#child {
    padding: 10px;
    margin-right: -50%;
    float: right;
}