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

Posted 2023-03-05

【中文标题】在 100% 高度的 div 中垂直居中文本？

【英文标题】：Vertically center text in a 100% height div?

【发布时间】：2011-06-12 19:49:26

【问题描述】：

我正在使用 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;

【问题讨论】：

可以选择 javascript/jQuery 吗？

如果绝对没有纯 CSS 选项，那么可以。虽然我宁愿不这样做。

How to vertically center text with CSS?的可能重复

【参考方案1】：

最好和最简单的方法（目前在 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;

编辑：你有这个方法加上这个问题在这个问题中涵盖的所有方法：How do I vertically center text with CSS?

【讨论】：

是的，这取决于布局。也许最好的选择是将包装器设置为位置：相对，并使用位置：绝对位置设置形状，正如 sarcastyx 所说。然后你必须使用边距才能最终正确对齐。

还有另一种解决方案：使用vertical-align: middle with line-height。但是这个解决方案更适用于文本行和类似的东西......

它只适用于固定高度，如果我设置 100% 高度，块不会反应。

尝试将父级设置为display: table。

其他解决方案均不适用于离子。但这完美无缺！ +1

【参考方案2】：

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

---

要使其完全居中（如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>​

【讨论】：

+1 好答案。如果您的 jsfiddle 相当简洁，请考虑在答案中复制代码，以便提供更好的参考。

这不能回答问题中的 100% div 高度要求

@Onimusha 在我的示例中，#parent 元素的高度为3em，以便很容易看出原始解决方案实际上并未垂直居中一行文本。 #parent 高度可以是任何值，因此如果将其更改为 100%，该解决方案仍然有效。

【参考方案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>

【讨论】：

谢谢！我已经尝试了几个小时的table-cell 食谱，但它们只适用于固定高度的容器；外部的display: table 终于使它与 100% 的容器一起工作。

这仅适用于动态高度容器。

【参考方案4】：

由于它是绝对定位的，您可以使用 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>

【讨论】：

我怀疑如果你从绝对 div 中删除 height:300px，你可以删除 overflow:hidden。

你可以，但是绝对定位的 div 不是父 div 的 100% 高度。我猜作者就是这样。

@sarcastyx 我已经尝试过使用浮动元素和 position:relative 的解决方案，但它只是将内容推到了底部！此外，由于隐藏的溢出，部分内容消失了。有什么想法吗？

@Snowbell92，这个答案更适合 OP 问题中的场景。如果你能给我更多关于你正在尝试什么或你拥有什么的想法，那么我可以给你一个更好的答案。

@sarcastyx 我应该发布一个新问题吗？我试图做这样的事情：我有一个三列布局，列是浮动的，我想要一个块（实际上是徽标）在 div 内垂直居中。 div 也有 100% 的高度。感谢您的帮助。

【参考方案5】：

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

【参考方案6】：

尽管这个问题已经很老了，但这里有一个解决方案，它适用于需要垂直居中的单行和多行（可以很容易地垂直和水平居中，如 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%);

【参考方案7】：

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

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

【参考方案8】：

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

  <table  >
         <tr align="center">
               <th align="center">
                 text
               </th>
          </tr>
  </table><

【参考方案9】：

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

【参考方案10】：

你试过vertical-align: middle ???

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

【参考方案11】：

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

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

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

【参考方案12】：

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

【参考方案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/