center vertically the content of a div ( not by line-height )

Question

I have a div which I need to center vertically its content:

Free coffee for all the people who visit my restaurant&l         


        
                      

              相关标签:
       
      

Answer 1

Line-height will give a vertical height to all the lines in the para, since you have absolute positioned div and there is a paragraph inside, you'll need a child div to align them vertically!

DEMO

CSS :

#coffee {
    width: 300px;
}
#coffee > .mid {
    margin-top:25%;
    text-align:center
}

HTML

<div draggable="false" id="coffee" style="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; height: 234.93749999999997px; opacity: 1;border:1px solid #000">
    <div class="mid">
    Free coffee for all the people who visit my restaurant
    </div>
</div>

Answer 2

You have to add a second div to achieve this.

<div draggable="false" id="coffee" style="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; height: 234.93749999999997px; opacity: 1;">
    <div class="inner">
    Free coffee for all the people who visit my restaurant
    </div>
</div>

#coffee {
    display: table;
    width: 300px;
    background-color: red;
}
#coffee .inner{
    vertical-align: middle;   
    display: table-cell;
}

Example: http://jsfiddle.net/2Mb39/12/

Answer 3

Is this what you're trying to achieve?

HTML

<div draggable="false" id="coffee" style="position: absolute; overflow: auto; vertical-align: middle; 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: 67px; height: 235px; opacity: 1;"><span class="marqtext">Free coffee for all the people who visit my restaurant</span></div>

CSS

#coffee {
  line-height: 235px;
  width: 300px;
}
.marqtext {
  display:table-cell;
  position:relative;
  top:180px;
  text-align:center;
}

Answer 4

If your inner div has a flexible height you can center it using CSS transforms:

#coffee {
    width: 300px;
    position:relative;
}
#coffee > div {
    background:#ddffff;
    position:absolute;
    top:50%;
    max-height:100%;
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    transform:translateY(-50%);
}

http://jsfiddle.net/2Mb39/16/