Centering text based on a larger width than the texts max-width - html

Question

I have a p element inside two circles with borders and need to center the p element based on the width of the circles however I want to cause the p element to break into two lines without needing to create two p elements so I used a max-width. I believe that this is causing it not to center, but I could be wrong. If anyone knows a good hack to get around this please enlighten me
DEMO
<div class="one">
<div class="two">
<p class="survive">Surviving Earth</p>
</div>
</div>
.one {
width: 300px;
height: 300px;
border-radius: 50%;
border: 20px inset #81ff14;
}
.two {
width: 250px;
height: 250px;
border-radius: 50%;
border: 20px outset #81ff14;
margin: auto;
margin-top: 5px;
text-align: center;
}
.survive {
font-size: 36px;
max-width: 100px;
}

Answer 1

Your 100px wide <p> is block-level, so it will not follow the inline text-align: center rule. You need to give it an automatic left-right margin to put it in the horizontal center:
.survive {
font-size: 36px;
margin-left: auto;
margin-right: auto;
max-width: 100px;
}
Once you do this, you'll notice it sits a bit too far to the right. That's because your first word is wider than the 100px limit (I measure about 140px) and the browser will not wrap inside a word.
.one {
width: 300px;
height: 300px;
border-radius: 50%;
border: 20px inset #81ff14;
}
.two {
width: 250px;
height: 250px;
border-radius: 50%;
border: 20px outset #81ff14;
margin: auto;
margin-top: 5px;
text-align: center;
}
.survive {
font-size: 36px;
margin-left: auto;
margin-right: auto;
max-width: 100px;
text-align: center;
}
<div class="one">
<div class="two">
<p class="survive">Surviving Earth</p>
</div>
</div>