在绝对居中的球体中垂直居中文本

Question

我尝试了几种技术，但目前为止没有一种方法可以在绝对居中的球体中居中文本。 球体的大小已知，但文本长度未知。 这是一个缺少垂直对齐的示例：

http://jsfiddle.net/eevw3oes/

css:

div
{
    position: absolute;
    border-radius: 50%;
    top: 50px;
    width: 100px;
    height: 100px;
    background: yellow;
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
}

- no_gravity

---

这绝对可以用 CSS 实现。 - Jakob Jingleheimer

Answer 1

Flexbox来拯救: http://jsfiddle.net/eevw3oes/2/

div {
    align-items: center;
    display: flex;
    …
}

这也可以通过增加更多的DOM并使用传统的CSS来实现。我看到你正在尝试使用vertical-align: middle，但这对于块级元素无效（仅适用于内联块和表格单元格）。

- Jakob Jingleheimer

---

@no_gravity 请看我的答案。 - Pointy

Answer 2

Flexbox将起到作用，变换也是如此：

<div class=circle style="left: 50px;">
    <div class=text>
    I'd like to be centered.
    </div>
</div>

<div class=circle style="left: 200px;">
    <div class=text>
    I would like also like to be centerd. Even though I have long text. I would like to be centerd horizontally and vertically. Is that possible. Oh I wish it would work.
  </div>
</div>

我已经为文本添加了内部的<div>元素。CSS如下：

.circle {
    position: absolute;
    border-radius: 50%;
    top: 50px;
    width: 100px;
    height: 100px;
    background: yellow;
    overflow: hidden;
    padding: 20px;
}

div.text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    height: auto;
}

CodePen.

- Pointy

---

非常棒！如果我可以投票选出两个答案作为解决方案，我也会投票选择这一个。 - no_gravity

这对于许多不适合使用flexbox的情况非常有用；然而，这更昂贵以呈现。此外，如果您尝试进行CSS动画/过渡，则transform接受多个函数（缩放、平移等），它们的顺序很重要，因此操作它们很困难。 - Jakob Jingleheimer

@jacob 我猜这很贵，但你要垂直居中多少个元素？如果是300或5000或其他数量，那么性能值得考虑。我怀疑对于许多设计来说，只有一个或两个元素。 - Pointy

我也有这个怀疑。只是指出性能方面的影响。此外，将硬件加速的属性与绝对/固定定位相结合可能会在Webkit中引起令人困惑的渲染错误。 - Jakob Jingleheimer

Answer 3

我认为你可以添加与width相同的line-height值。

line-height: 100px;

请看这个Fiddle。

有人在Stackoverflow上已经遇到了类似的问题。

- pbaldauf

---

那种解决方案的问题在于你只能适应一行文本。 - Pownyan

文本在那个编辑器里无法换行，我想让它自动换行。 - no_gravity