html - 以中心为引用点定位div？

Question

我有一个包含动态文本内容的 div。文字的数量在一个词到五个或十个词之间变化(大字体)。现在，它绝对位于距其相对定位的父级的底部和右侧一定距离。

但是，由于内容是动态的，所以当有时有更多文本并且文本进一步进入父级的主要区域时，它看起来很尴尬。这是因为现在，div 的引用点是它的右下角。 是否可以像上图那样以中心为引用点定位？

父容器的样式与正常一样，position: relative; 和 100% 宽度和高度

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

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

我试过宽度、最大宽度和最小宽度，但结果仍然不理想

Answer 1

这个怎么样？使用下面的 CSS 比较这两个 fiddle fiddle1 & fiddle2

HTML

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

CSS

#parent {
    position: relative;
    width: 100%;
    height: 100%;
}
#anchor {
    position: absolute;
    right: 33%;
    bottom: 33%;
}
#child {
    padding: 10px;
    margin-right: -50%;
    float: right;
}