垂直居中 div 的内容（不按 line-height ）答案

【问题标题】：center vertically the content of a div ( not by line-height )垂直居中 div 的内容（不按 line-height ）
【发布时间】：2013-11-27 23:34:15
【问题描述】：

我有一个 div，我需要将其内容垂直居中：

<div draggable="false" id="coffee">Free coffee for all the people who visit my restaurant</div>

#coffee {
        line-height: 235px;
        width: 300px;
    }

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;
    height: 234.93749999999997px;
    opacity: 1;
}

使用line-height有效，但是在跳转行中，词组太分开了，我需要它不分开。

这是小提琴链接：http://jsfiddle.net/2Mb39/4/

丹尼尔

【问题讨论】：

我测试过的所有回复都运行良好，但我将 Jop 的回复标记为已解决

标签： css center

【解决方案1】：

您必须添加第二个 div 才能实现此目的。

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

示例：http://jsfiddle.net/2Mb39/12/

【讨论】：

【解决方案2】：

这是你想要达到的目标吗？

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

【讨论】：

【解决方案3】：

如果您的内部 div 有一个灵活的高度，您可以使用 CSS 变换将其居中：

#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/

【讨论】：

【解决方案4】：

Line-height 将为 para 中的所有行提供垂直高度，因为您有 absolute positioned div 并且内部有一个 paragraph，您需要一个子 div 来垂直对齐它们！

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>

【讨论】：