Circles inside circle and vertical centering text - html

Question

I am trying to draw 2 outer circle around a circle and keeping the text as vertically centered.
I am able to draw a circle outside a circle but not the 3rd one.
Html
<div id="content">
<div id="outer-circle">
<p>text</p>
</div>
</div>
Demo : http://jsfiddle.net/squidraj/7vusbo0v/1/
The text is also not centering horizontally.
Any help is highly appreciated. Thanks in advance.

Answer 1

Here is my solution, based on your code:
Creating a "3rd circle" by using the parent #container
centering the text by using the display:table-cell(which allows you to vertical align elements)
#content {
border-radius: 50%;
height: 320px;
width: 320px;
position: relative;
box-shadow: 0 0px 0 10px green;
margin: 10px;
}
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 300px;
width: 300px;
position: absolute;
box-shadow: 0 0px 0 10px black;
top: 10px;
left: 10px;
display: table;
}
#outer-circle p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div id="content">
<div id="outer-circle">
<p>text</p>
</div>
</div>
I was editing my answer by the time it got accepted and received comments on, but no matter what I'm giving the other solution i was typing at the time:
Applying the border property to your #outer-circle would do the "3rd circle" since you are using box-shadow on it.
to vertical align the text, same solution as the 1st one.
#outer-circle {
background: #385a94;
border-radius: 50%;
height: 300px;
width: 300px;
position: absolute;
box-shadow: 0 0px 0 10px green;
top: 10px;
left: 10px;
display: table;
border: 10px solid black;
margin:10px;
}
#outer-circle p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div id="content">
<div id="outer-circle">
<p>text</p>
</div>
</div>

Answer 2

There is nothing different with them being in a circle, so follow the normal centering rules
The specifics are dependant on what browsers you need to support

Answer 3

Patrick's reference is correct. Give the following a try:
#outer-circle p {
text-align: center;
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
margin-top: -5px;
}
Note that I've added a negative top margin, which accounts for your border width.

Answer 4

set you css
#outer-circle p {
bottom: 0;
left: 0;
/* position: absolute; */
right: 0;
text-align: center;
padding: 50% 0;
top: 0;
}
see https://jsfiddle.net/fwzfoncy/