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

发布于 2024-10-13 02:55:22 字数 536 浏览 8 评论 0原文

我正在使用一个高度为父级 div 100% 的 div。

div 仅包含一行文本。

div 不能有固定的高度。

所以我的问题是。

如何使文本行垂直居中？

我尝试过使用：

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

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

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

原文

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

The div only contains a single line of text.

The div cannot have a fixed height.

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.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情场扛把子 2024-10-20 02:55:22

最好、最简单的方法（目前是 ~~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>

旧答案： 如果还指定了 display: table-cell;，则可以使用 Vertical-align: middle;

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

Edit: 您有此方法以及此问题中涵盖的所有方法：如何使用 CSS 垂直居中文本？

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

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

And that's it :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;

.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;:

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

回复收藏 0 原文

你的背包 2024-10-20 02:55:22

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

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

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。净/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>

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

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:

margin-top: -0.5em;

for example:

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/

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

回复收藏 0 原文

孤千羽 2024-10-20 02:55:22

试试这个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>

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

css

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

and the html

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

回复收藏 0 原文

如歌彻婉言 2024-10-20 02:55:22

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

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

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:

The CSS:

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

The HTML:

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

回复收藏 0 原文

彡翼 2024-10-20 02:55:22

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

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

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

回复收藏 0 原文

棒棒糖 2024-10-20 02:55:22

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

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

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.

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

回复收藏 0 原文

べ繥欢鉨o。 2024-10-20 02:55:22

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

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

回复收藏 0 原文

对你而言 2024-10-20 02:55:22

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

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

just wrap your content with a table like this:

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

回复收藏 0 原文

爱情眠于流年 2024-10-20 02:55:22

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

回复收藏 0 原文

瞄了个咪的 2024-10-20 02:55:22

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

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

回复收藏 0 原文

霓裳挽歌倾城醉 2024-10-20 02:55:22

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

我大多数情况下只在某些内容应该相对于其他内容“弹出”时才使用绝对位置浮动，我认为这是使用它的最佳方式，这样您就不必摆弄这样的事情。

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

回复收藏 0 原文

猫瑾少女 2024-10-20 02:55:22

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

回复收藏 0 原文

习惯那些不曾习惯的习惯 2024-10-20 02:55:22

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

caniuse - 浏览器支持。

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

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

Modern solution - works in all browsers and IE9+

caniuse - browser support.

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

Example: http://jsbin.com/rehovixufe/1/

回复收藏 0 原文

~没有更多了~