Vertically center text in a 100% height div?

后端未结

关注

 13  600

傲寒

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 m

相关标签:

13条回答

庸人自扰

2020-12-05 17:48
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 讨论(0)
发布评论:

提交评论
- 加载中...

情话喂你

2020-12-05 17:51

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 讨论(0)

你的背包

2020-12-05 17:53

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 讨论(0)

太阳男子

2020-12-05 17:54

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

0 讨论(0)
发布评论:

提交评论
- 加载中...
轻奢々

2020-12-05 18:00

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

0 讨论(0)
发布评论:

提交评论
- 加载中...

悲&欢浪女

2020-12-05 18:01

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 讨论(0)