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

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。但是，如果有办法解决这个问题，我会同意的。

更新

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

Answer 1

你不需要包装器 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;
}

而且，抱歉，我不确定如何创建 post 的 'snippets' 部分。

编辑更新比率，

宽度1:height3:宽度3

Answer 2

您可以在 (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>

Answer 3

我会建议这样的东西

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 4

将以下属性更改或添加到您的 class 内容中。

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 5

我想我明白了，有两个 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%;


}

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

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

How to vertically center text relative to a circle

html

css

geometry

aspect-ratio

更新