html - 以中心为参考点定位div？

Question

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

但是，由于内容是动态的，因此有时文本较多且文本深入到父级的主要区域时会显得很尴尬。这是因为现在，div 的参考点是它的右下角。是否可以将其定位为以中心为参考点，如上图所示？

父容器的样式正常，带有position: relative;和100% width and height

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

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

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

Answer 1

这个怎么样？使用下面的 CSS 比较这两个小提琴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;
}