center vertically the content of a div

Question

I have this div:

HTML:

<div draggable="false" id="coffe">Free coffee</div>

CSS:

div {
    position: absolute;
    overflow: auto;
    text-align: left;
    font-size: 23px;
    color: rgb(26, 66, 108);
    font-family: roboto, Helvetica;
    font-style: normal;
    font-weight: bold;
    -webkit-transition: none;
    transition: none;
    left: 0px;
    top: 67.125px;
    width: 1029.25px;
    height: 234.93749999999997px;
    opacity: 1;
    background: grey;
}

And I need to vertically center its content, which is "free coffee".

How can I do this? I tried with vertical-align: middle; but it doesn't work.

This is the fiddle file: http://jsfiddle.net/2Mb39/

possible duplicate of [Center single- AND multi-line li text vertically](http://stackoverflow.com/questions/4095165/center-single-and-multi-line-li-text-vertically) — isherwood, Nov 27 '13 at 15:01
Or http://stackoverflow.com/questions/4952943/vertically-center-align-text — isherwood, Nov 27 '13 at 15:03
Or http://stackoverflow.com/questions/12649287/vertically-centering-inline-content-using-line-height — isherwood, Nov 27 '13 at 15:03

score 8 · Accepted Answer · edited Jan 27 '14 at 01:24

8

Specify a line-height that matches the <div>'s height:

line-height: 235px;

See this jsFiddle Demo

edited Jan 27 '14 at 01:24

animuson

53,861
28
137
147

answered Nov 27 '13 at 15:00

BenM

52,573
26
113
168

Start another question, rather than moving the goalposts of this one. – BenM Nov 27 '13 at 15:12

center vertically the content of a div

1 Answers1

Linked