Patrick Roberts Patrick Roberts - 6 months ago 27
HTML Question

How to vertically center text relative to a circle

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.

Answer

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>

Comments