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

这个问题在这里已经有了答案：

我如何垂直居中文本与CSS？ 34个答案

---

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

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

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

---

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。

---

我想你可以添加line-height具有相同的值width

line-height: 100px;

看到这个小提琴

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

链接地址: http://www.djcxy.com/p/41665.html

上一篇: Vertically center text in an absolutely centered sphere

下一篇: I'm trying to center text on a div vertically and horizontally