在绝对居中的球体中垂直居中文本[重复]

Posted 2023-03-05

【中文标题】在绝对居中的球体中垂直居中文本[重复]

【英文标题】：Vertically center text in an absolutely centered sphere [duplicate]

【发布时间】：2014-12-21 06:44:56

【问题描述】：

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

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;

【问题讨论】：

完全可以用css来完成。

【参考方案1】：

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.

【讨论】：

非常棒！如果我可以投票 2 个答案作为解决方案，我也会投票给这个。

这适用于很多不适合 flexbox 的情况；但是，渲染成本更高。另外，如果你尝试做 css 动画/过渡，transform 接受多个函数（缩放、翻译等），它们的顺序很重要，所以操作它们很困难。

@jacob 我想这很昂贵，但是您要垂直居中多少元素？如果是 300 或 5000 或其他，那么是的，性能值得考虑。我怀疑很多设计只有一两个元素。

我也怀疑这一点。只是指出性能的影响。此外，将硬件加速道具与绝对/固定定位相结合可能会导致 webkit 中出现令人费解的渲染错误。

【参考方案2】：

Flexbox 救援：http://jsfiddle.net/eevw3oes/2/

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

这也可以通过添加更多的 DOM 和使用传统的 css 来实现。我看到您正在尝试使用 vertical-align: middle，但这不适用于块元素（仅适用于 inline-block 和 table-cell）。

【讨论】：

@no_gravity 看我的回答。

【参考方案3】：

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

line-height: 100px;

看到这个Fiddle

有人已经在***上遇到过类似的问题。

【讨论】：

该解决方案的问题是您只能容纳一行文本

文本不会在那个小提琴中换行。我想让文本换行。