div{
display:inline-block;
border-radius:50%;
background-color:yellow;
}
<div>文字数可変のテキスト</div>
border-radius
で円を作るなら、aspect-ratio
でボックスが正方形になることを保証して、flexible box でセンタリングするのはいかがでしょうか。
div{
display: inline-flex; /* センタリングのため変更 */
border-radius: 50%;
background-color: yellow;
aspect-ratio: 1; /* 正円のため追加 */
align-items: center; /* センタリングのため追加 */
}
<div>文字数可変のテキスト</div>
<div>文字数可変</div>