37

我正在使用一个 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;
}
4

13 回答 13

39

最好和最简单的方法（目前是2015 2020）是使用 flexbox：

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

就是这样：D

查看这个工作示例：

div {
    border: 1px solid red;
    height: 150px;
    width: 350px;
    justify-content: center;

    /* Actual code */
    display: flex;
    align-items: center;
}
<div>
    <p>Hola</p>
</div>

旧答案：您可以使用 vertical-align: middle 如果您还指定 display: table-cell;

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

工作示例：

div {
  border: 1px solid red;
  height: 150px;
  width: 350px;
  text-align: center;
  
  /* Actual code */
  display: table-cell;
  vertical-align: middle;
}
<div>
    <p>Hola</p>
</div>

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

.parent-selector {
    display: table;
}

编辑：你有这个方法加上这个问题在这个问题中涵盖的所有方法：如何使用 CSS 垂直居中文本？

于 2011-01-20T23:10:11.783 回答
28

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

要使其完全居中（如大卫的回答中所述），您需要添加一个负的上边距。如果您知道（或强制）只有一行文本，您可以使用：

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>​
于 2012-11-07T17:05:18.817 回答
8

试试这个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>
于 2013-11-28T16:04:12.883 回答
6

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

但是随后您遇到了页面比您想要的更大的问题。为此，您可以对父 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>
于 2011-01-20T23:22:21.977 回答
3

我不同意，这是一个免费的 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>
于 2012-07-26T15:17:27.913 回答
3

尽管这个问题已经很老了，但这里有一个解决方案，它适用于需要垂直居中的单行和多行（可以很容易地垂直和水平居中，如Demo中的 css 所示。

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%);
}
于 2014-08-15T08:37:10.960 回答
1

如果你知道你的文本会有多高，你可以使用 x 的组合，top:50%其中margin-top:-x px x 是文本高度的一半。

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

于 2011-01-21T00:13:53.940 回答
1

只需用这样的表格包装您的内容：

  <table width="100%" height="100%">
         <tr align="center">
               <th align="center">
                 text
               </th>
          </tr>
  </table><
于 2012-03-13T17:36:04.780 回答
0

你试过 line-height:1em; 吗？我记得那是让它垂直居中的方法。

于 2011-01-20T23:07:49.057 回答
0

你试过垂直对齐：中间？？？

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

于 2011-01-20T23:08:36.767 回答
0

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

我主要只在某些东西应该“弹出”相对于浮动中的其他东西时才使用绝对位置，我认为这是使用它的最佳方式，所以你不必摆弄这样的东西。

无意冒犯，但这里的大多数答案都离题了。

于 2011-01-20T23:20:36.703 回答
0

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

于 2013-04-05T12:10:28.090 回答
0

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

caniuse - 浏览器支持。

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

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

于 2015-06-08T17:52:59.353 回答