Search code examples
htmlcssalignmentcentering

Vertically center text in an absolutely centered sphere

I have tried a couple of techniques, but so far nothing works to center text in an absolutely centered sphere. The size of the sphere is known, but not the length of the text. Here is an example that is lacking vertical alignment:

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

  • Flexbox to the rescue: http://jsfiddle.net/eevw3oes/2/

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

    This can also be accomplished by adding more DOM and using traditional css. I see you're trying to use vertical-align: middle, but that doesn't work on block elements (only with inline-block and table-cell).