如何使文本相对于圆垂直居中

Question

这是我迄今为止尝试过的：

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>

我无法将文本放入圆圈中，因为圆圈的padding-top 将其纵横比保持在 1:1。但是，如果有办法解决这个问题，我会接受的。

更新

这不能通过假设圆圈或内容的宽度和高度来解决，因为它是动态的，基于窗口的大小和用户提供的内容。可能是一两段文字。

Answer 1

我想我明白了，有两个 div：

<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%;


}

小提琴：https://jsfiddle.net/njngv3qk/

Answer 2

在您的课程内容中更改或添加以下属性。

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);
}

Answer 3

你不需要一个包装 div，只需要一个 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;
}

而且，抱歉，我不确定如何创建帖子的“sn-ps”部分。

编辑更新的比率，

宽1：高3：宽3

Answer 4

我会建议这样的事情

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>

Answer 5

您可以在 (wrapper) 中插入文本 (content)。

这可能是一个可能的解决方案： 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>