Question

我正在使用100％父div高度的div。

div只包含一行文字。

div不能有固定的高度。

所以我的问题是。

如何垂直居中文字行？

我尝试过使用：

display: table-cell;  
line-height:200%;

如果重要的话，div绝对定位。

<小时/> 当前CSS

.requests {
    position: absolute;
    right: 0;
    height: 100%;
    width: 50px;
    padding: 0 10px;
    background-color: #69A4B5;
    display: table-cell;
    vertical-align: middle;
    border-bottom-right-radius: 5px;
}

Answer 1

编辑：最好和最简单的方法（目前在 ~~2015~~ 2017）使用flexbox：

.parent-selector {
    display: flex;
    align-items: center;
}

就是这样：D

查看此工作示例：http://jsfiddle.net/qj2Jr/114/

旧答案：如果您同时指定display：table-cell，则可以使用vertical-align：middle;

.div {
    display: table-cell;
    vertical-align: middle;
}

工作示例：http://jsfiddle.net/qj2Jr/1/

如果它不起作用，您可以尝试将其父级设置为display: table;：

.parent-selector {
    display: table;
}

修改：在此问题中，您有此方法以及此问题中涵盖的所有方法：How do I vertically center text with CSS?

Answer 2

这个答案不再是最好的答案......请参阅下面的弹性箱答案！

为了使其完全居中（如david's answer中所述），您需要添加负上边距。如果您知道（或强制）只有一行文本，您可以使用：

margin-top: -0.5em;

例如：

http://jsfiddle.net/45MHk/623/

//CSS:
html, body, div {
    height: 100%;
}

#parent
{
    position:relative;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
    /* adjust top up half the height of a single line */
    margin-top: -0.5em;
    /* force content to always be a single line */
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
}

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>

最初接受的答案不会垂直居中于文本的中间（它基于文本的顶部居中）。所以，如果你的父母不是很高，它就不会看起来居中，例如：

http://jsfiddle.net/45MHk/

//CSS:
#parent
{
    position:relative;
    height: 3em;
    border: 1px solid black;
}

#child
{
    position: absolute;
    top: 50%;
} 

//HTML:
<div id="parent">
    <div id="child">Text that is suppose to be centered</div>
</div>

Answer 3

试试这个http://jsfiddle.net/Husamuddin/ByNa3/ 它适用于我，
CSS

.table {
    width:100%;
    height:100%;
    position:absolute;
    display:table;
}
.cell {
    display:table-cell;
    vertical-align:middle;
    width:100%;
    height:100%:
}

和html

<div class="table">
    <div class="cell">Hello, I'm in the middle</div>
</div>

Answer 4

由于它绝对定位，您可以使用top：50％将其垂直对齐在中心。

但是你遇到了比你想要的更大的页面问题。为此，您可以使用overflow：hidden为父div。这就是我用来创造相同效果的东西：

CSS：

div.parent {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}
div.parent div.absolute {
    position: absolute;
    top: 50%;
    height: 300px;
}

HTML：

<div class="parent">
    <div class="absolute">This is vertically center aligned</div>
</div>

Answer 5

即使这个问题很老，这里的解决方案适用于需要垂直居中的单行和多行（可以很容易地垂直和水平居中，如 {{中的css所示） 3}}

HTML

<div class="parent"> <div class="child">Text that needs to be vertically centered</div> </div>

CSS

.parent { position: relative; height: 400px; } .child { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

Answer 6

我不同意，这是一个JS免费的解决方案，它有效：

<html style="height: 100%;">
    <body style="vertical-align: middle; margin: 0px; height: 100%;">
        <div style="height: 100%; width: 100%; display: table; background-color: #ccc;">
            <div style="display: table-cell; width: 100%; vertical-align: middle;">
                <div style="height: 300px; width: 600px; background-color: wheat; margin-left: auto; margin-right: auto;">A</div>
            </div>
        </div>
    </body>
</html>

Answer 7

如果您知道文字的高度，可以使用top:50%和margin-top:-x px的组合，其中x是文字高度的一半。

工作示例： http://jsfiddle.net/Qy4yy/

Answer 8

只需使用如下表格包装您的内容：

  <table width="100%" height="100%">
         <tr align="center">
               <th align="center">
                 text
               </th>
          </tr>
  </table><

Answer 9

你试过行高：1em;？我记得那是让它垂直居中的方法。

Answer 10

您是否尝试过vertical-align：middle ???

您可以在此处找到有关vertical-align的更多信息：http://www.w3schools.com/css/pr_pos_vertical-align.asp

Answer 11

垂直对齐，动态高度与绝对位置相结合除了一些特殊条件，没有几行JS（例如jQuery）是不可能的。（在某些情况下可以用后端代码解决，或者最小高度与合理的顶部或边缘样式相结合，但不完美）

我主要只使用绝对位置，当某个东西应该与浮动中的其他东西“弹出”时，我认为这是使用它的最佳方式，所以你不必操作这样的东西。

没有冒犯，但这里的大多数答案都是关闭的。

Answer 12

将线条高度设置为与div的高度相同将使文本居中。仅在有一行时才有效。（例如按钮）。

Answer 13

现代解决方案 - 适用于所有浏览器和 IE9 +

caniuse - 浏览器支持。

.v-center {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

示例：http://jsbin.com/rehovixufe/1/

在100％高度div中垂直居中文本？

13 个答案:

HTML

CSS