Text overflow in circle div - html

Question

I have a circle div and my text isn't inside it. By default it is slightly above and I can't pinpoint why. I have added margin to the top to force it inside the div but I am sure there is a better way to do this because my method only works for a certain amount of text.
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.

Answer 1

Here's a version that allows for any size text inside, although of course the size of the surrounding <div> will have to be changed if the size of the content is vastly greater. I added a second example with a bit more text.
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>

Answer 2

You should use css3 flexbox. Following css will make an element horizontally and vertically middle aligned:
div.description {
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
}
div.description {
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
padding: 25px;
}
<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>
For old browser support you can use following css to make it middle aligned:
div.description {
display: table;
}
div.description div.text {
vertical-align: middle;
display: table-cell;
}
div.description {
display: table;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
padding: 25px;
}
div.description div.text {
vertical-align: middle;
display: table-cell;
}
<div class="description">
<div class="text">
<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>

Answer 3

You can use the concept of padding:20px; to achieve the output you have expected
div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
padding: 20px;
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>

Answer 4

you can try this. giving a max-width to p element smaller than the circle so it will not exede beyond the circle.
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.description p{
max-width: 450px;
margin: 0 auto;
}
<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>