我有一个圆形 div，但我的文本不在其中。默认情况下它略高于我无法查明原因。我在顶部添加了边距以将其强制放在 div 内，但我确信有更好的方法来执行此操作，因为我的方法仅适用于一定数量的文本。
div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
}<div class="description">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci,
viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra
interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget
leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo
in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus,
in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna,
a ornare ex blandit a.
</p>
</div>This is what it looks like
But I want it to look more like this but without having to add margin to the top of the text inside the div.
这是一个允许内部任意大小文本的版本，当然周围的文本大小也可以<div>如果内容的大小大得多，则必须更改。我添加了第二个示例，其中包含更多文本。
div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: justify;
text-align-last: center;
position: relative;
}
div.description h1 {
margin: 0;
padding: 0;
}
div.description p {
padding: 3.5em;
position: absolute;
top: 50%;
max-width: 470px;
max-height: 470px;
transform: translate(0,-50%);
}<div class="description">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, a ornare ex blandit a.</p>
</div>
<div class="description">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, a ornare ex blandit a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat.</p>
</div>