How to vertically center text relative to a circle

Question

Here is what I've tried so far:

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
html {
  position: absolute;
}
body {
  position: relative;
}
.wrapper {
  display: table;
}
.circle {
  position: absolute;
  top: 25%;
  left: 25%;
  border-radius: 50%;
  width: 50%;
  height: auto;
  padding-top: 50%;
  background-color: #403C36;
  box-shadow: 1px 0.2px 25px 1px rgba(0, 0, 0, 0.25);
}
.content {
  display: table-cell;
  vertical-align: middle;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: auto;
  text-align: center;
}

<div class="wrapper">
  <div class="circle"></div>
  <div class="content">I want this to be centered vertically in the circle</div>
</div>

I can't put the text in the circle because of the circle's padding-top which keeps its aspect ratio at 1:1. However, if there's a way to get around that, I'd be fine with that.

Update

This cannot be addressed by assuming the width and height of the circle or the content since it is dynamic, based on the window's size, and user-contributed content. It's probably a paragraph or two of text.

Possible duplicate of [css: how to draw circle with text in middle?](http://stackoverflow.com/questions/16615403/css-how-to-draw-circle-with-text-in-middle) — Pugazh, May 19 '16 at 10:11
No this is different because the width and height of the circle is unknown. — Patrick Roberts, May 19 '16 at 10:12

score 3 · Accepted Answer · answered May 19 '16 at 10:35

3

Something like this I would suggest

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle {
  width: 50%;
  padding-top: 50%;
  background: brown;
  border-radius: 50%;
  position: relative;
}
.content {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: pink;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center
}

<div class="circle">

  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, tenetur!</p>
  </div>
</div>

answered May 19 '16 at 10:35

Paulie_D

107,962
13
142
161

This is the closest answer so far, and I'm probably going to accept it. Just a quick question, would it be possible if the circle and text inside are not centered relative to the page? I'd just have to add another parent element outside `.circle` to determine the location? – Patrick Roberts May 19 '16 at 10:39
How you center the original circle is up to you...but that's not the topic of this question. The flex properties I applied to the `body` will work on any container of the circle to center **the circle** *in that container*. – Paulie_D May 19 '16 at 10:43
I just tried this and it messed up the formatting of the content. Try adding another `
`, it places them side-by-side instead of vertically stacked. Is there any way I can change that?
– Patrick Roberts May 19 '16 at 10:55
Nevermind, I added another wrapper between `.content` and the HTML, it fixed it. – Patrick Roberts May 19 '16 at 11:05
1

If you want more than one paragraph add `flex-direction:column` to the content div. – Paulie_D May 19 '16 at 11:22

score 1 · Answer 2 · answered May 19 '16 at 10:40

1

I think i got it, with two divs:

<div class="circle">
<div class="text">
TEXT multiline
will be
</div>
</div>

CSS:

.circle {

  border-radius: 50%;
  width: 50%;
  height: auto;
 padding-top:50%;
  background-color: #403C36;
  box-shadow: 1px 0.2px 25px 1px rgba(0, 0, 0, 0.25);
  position:relative;
}

.text {

  position:absolute;
  color:#fff;
  text-align:center;
width:100%;
 transform: translateY(-50%);

top: 50%;


}

Fiddle: https://jsfiddle.net/njngv3qk/

answered May 19 '16 at 10:40

sinisake

11,240
2
19
27

I like this approach as well, but the `flex` directives seem cleaner than using CSS transforms so I'm going with that. – Patrick Roberts May 19 '16 at 10:46

Harvey · Answer 3 · 2016-05-19T10:36:04.043

0

You wouldnt need a wrapper div for this, just one div

HTML

<div class="circle">Hello, World</div>

CSS

.circle {
  width: 10%;
  height: 30%;
  padding: 30%;
  border-radius: 50%;
  background-color: #001100;
  text-align: center;
  color: #ffffff;
}

And, sorry I am unsure of how to create the 'snippets' part of my post.

EDIT updated ratios,

width 1:height 3: width 3

edited May 19 '16 at 10:36

answered May 19 '16 at 10:18

Harvey

1,320
3
13
33

This doesn't work, that is no longer a circle, it's an oval. – Patrick Roberts May 19 '16 at 10:27
Keeping `width`, `height` and `padding` identical values will result in a circle – Harvey May 19 '16 at 10:29
I've tested some more, and added a new ratio... seems to be much more circular, unless you have width set < 2% – Harvey May 19 '16 at 10:36

ReshaD · Answer 4 · 2016-05-19T10:26:18.503

0

You can insert the text (content) inside the (wrapper).

This could be a possible solution: jsFiddle

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
html {
  position: absolute;
}
body {
  position: relative;
}
.wrapper {
  display: table;
}
.circle {
  position: absolute;
  top: 25%;
  left: 25%;
  border-radius: 50%;
  width: 50%;
  height: auto;
  padding-top: 50%;
  background-color: #403C36;
  box-shadow: 1px 0.2px 25px 1px rgba(0, 0, 0, 0.25);
}
.content {
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  text-align: center;
}

<div class="wrapper">
  <div class="circle">
    <div class="content">I want this to be centered vertically in the circle</div>
  </div>

</div>

edited May 19 '16 at 10:26

answered May 19 '16 at 10:18

ReshaD

936
2
18
30

Instead of `top: 45%;` how come you're not using `vertical-align: middle`? – Patrick Roberts May 19 '16 at 10:22
Nevermind, I see why. This still doesn't truly center the text. At best this assumes a fixed dimension for the `div.content`. – Patrick Roberts May 19 '16 at 10:23
@PatrickRoberts if you change top: 45%; to top: 50% it will centre the text vertically. – ReshaD May 19 '16 at 10:25
That's only true if it's one line of text. The size of the content is also unknown. – Patrick Roberts May 19 '16 at 10:28

score 0 · Answer 5 · answered May 19 '16 at 10:37

Change or add following properties into your class content.

HTML

<div class="wrapper"> <div class="circle"></div> <div class="content">I want this to be centered vertically in the circle</div> </div> CSS

.content {
  position: absolute;
  top: 92%;
  left: 25%;
  width: 50%;
  height: auto;
  text-align: center;
  transform : rotate(270deg);
}

How to vertically center text relative to a circle

Update

5 Answers5