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

Vertically center text in a 100% height div?

提问by Hailwood

I am working with a div that is 100% of the parent divs height.

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

The div only contains a single line of text.

div 只包含一行文本。

The div cannot have a fixed height.

div 不能有固定的高度。

So my question is.

所以我的问题是。

How do I vertically center the line of text?

如何垂直居中文本行？

I have tried using:

我试过使用：

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

If it is important the div is absolutely positioned.

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

---

---

Current CSS当前 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;
}

采纳答案by gregjhogan

This answer is no longer the best answer ... see the flexbox answer below instead!

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

---

---

To get it perfectly centered (as mentioned in david's answer) you need to add a negative top margin. If you know (or force) there to only be a single line of text, you can use:

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

margin-top: -0.5em;

margin-top: -0.5em;

for example:

例如：

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

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>?

The originally accepted answer will not vertically center on the middle of the text (it centers based on the top of the text). So, if you parent is not very tall, it will not look centered at all, for example:

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

http://jsfiddle.net/45MHk/

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>?

回答by elboletaire

The best and easiest way to do it (currently in 20152020) is using flexbox:

最好和最简单的方法（目前在20152020 年）是使用 flexbox：

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

And that's it :D

就是这样：D

Check-out this working example:

查看这个工作示例：

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

    /* Actual code */
    display: flex;
    align-items: center;
}

<div>
    <p>Hola</p>
</div>

Old answer:You can use vertical-align: middle if you specify also display: table-cell;

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

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

Working example:

工作示例：

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>

If it does not work you can try setting its parent as display: table;:

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

.parent-selector {
    display: table;
}

Edit:You have this method plus all the methods covered on this question in this other question: How do I vertically center text with CSS?

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

回答by Husamuddin

Try this one http://jsfiddle.net/Husamuddin/ByNa3/it works fine with me,
css

试试这个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%:
}

and the html

和 html

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

回答by sarcastyx

Since it is absolutely positioned you can use top: 50% to vertically align it in the center.

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

But then you run into the issue of the page being bigger than you want it to be. For that you can use the overflow: hidden for the parent div. This is what I used to create the same effect:

但是随后您遇到了页面比您想要的大的问题。为此，您可以使用overflow: hidden 为父div。这是我用来创建相同效果的：

The CSS:

CSS：

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

The HTML:

HTML：

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

回答by mkmllr

Even though this question is pretty old, here's a solution that works with both single and multiple lines that need to be centered vertically (could easily be centered both vertically & horizontally as seen in the css in the Demo.

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

HTML

HTML

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

CSS

CSS

.parent {
    position: relative;
    height: 400px;
}

.child {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

回答by user1514042

I disagree, here's a JS free solution, which works:

我不同意，这是一个 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>

回答by david

If you know how tall your text is going to be you can use a combination of top:50%and margin-top:-x pxwhere x is half the height of your text.

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

Working example: http://jsfiddle.net/Qy4yy/

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

回答by jcfrei

just wrap your content with a table like this:

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

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

回答by nunny

Setting the line height to the same as the height of the div will cause the text to center. Only works if there is one line. (such as a button).

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

回答by Yevgeny Simkin

have you tried line-height:1em;? I recall that that's the way to get it to center vertically.

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