Question

以下是我迄今为止所做的尝试：

＆＃13;

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

＆＃13;

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

＆＃13;

我无法将文字放在圈子中，因为圈子的padding-top保持其宽高比为1：1。但是，如果有办法解决这个问题，那我就没事了。

更新

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

Answer 1

像我这样建议

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 2

我想我得到了它，有两个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 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;
}

抱歉，我不确定如何创建＆＃39;片段＆＃39;我的帖子的一部分。

编辑更新比率，

宽度1：高度3：宽度3

Answer 4

您可以在（content）内插入文字（wrapper）。

这可能是一个可能的解决方案： jsFiddle

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

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

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

如何相对于圆

更新

5 个答案: