How to vertically center the content of an element?

39

I'm trying to vertically center the content of an element that has position: absolute .

I've been able to make the content position half-way down the container , however, halfway up the space is "left over."

How can I solve this just by using ?

Here's my code so far:

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.content {
    position: absolute;
    top: 50%;
    left: 25%;
    width: 50%;
    text-align: center;
}
<div class="container">
    <div class="content">
        <h1>Conteúdo</h1>
        <p>Subtítulo</p>
    </div>
</div>

The idea is for the .container element to override the parent element, as if it were a loading indicator on just one element on the page.

    
asked by gustavohenke 12.12.2013 в 01:06

6 answers

28

This is independent of the content:

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ccc;
}
.content {
    position: absolute;
    top: 50%;
    left: 25%;
    width: 50%;
    text-align: center;
    -webkit-transform: translateY( -50% );
    -moz-transform: translateY( -50% );
    transform: translateY( -50% );
}

See the JSFiddle

    
12.12.2013 / 11:38
19

Using the given example, the problem is in the element with the class content whose same does not have a defined height, which does not allow to calculate the center of the same.

Even when assigning a height, being an element with an absolute position, it is in a layer higher than the other elements, which means that the height of the element is not calculated according to the other elements.

Solution

One of the possible solutions is to tell the browser that the elements must assume the visual behavior of the tables:

HTML

<div class="container">
    <div class="content">
        <h1>Conteúdo</h1>
        <p>Subtítulo</p>
    </div>
</div>

CSS

.container {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ccc;
    display:table;
}

.content {
    text-align: center;
    vertical-align:middle;
    display:table-cell;
}

See the JSFiddle

However, it is necessary to remove the position:absolute definition because it conflicts with the new display:table-cell definition, which in essence can not be positioned absolutely since it is always relative to the table where it is inserted .

Depending on the final objective, it can be applied to the element with the class content the definition position:relative in order to make it a container for other child elements.

    
12.12.2013 в 01:37
10

This article describes a variety of ways to achieve this goal. For your particular case (element with absolute position) I would recommend the "stretch" method:

Place your element with all positions ( top , left , bottom and right ) as 0 . This will cause it to "stretch" to occupy the entire screen. But because it is smaller than the canvas, putting the margin as auto will make it fit the actual dimensions of the element.

.content {
    position: absolute;
    text-align: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 50%;
    margin: auto;    
}

See the JSFiddle .

Note that it is necessary to specify a time for this method to work as expected.

    
12.12.2013 в 01:26
4

Dude, to center both vertical and horizontal in this case ... you need to set the size of the element, and beyond the top: 50% use negative margin-top with half height element.

For example in your code:

.content {
    position: absolute;
    height:120px;
    margin-top:-60px;
    top: 50%;
    left: 25%;
    border:1px solid red;
    width: 50%;
    text-align: center;
}
    
12.12.2013 в 01:25
3

If it's to centralize a DIV on a page, for now they have not created any way to do this, there are now 3 ways to do this:

  • Using an Absolute DIV : You put all your page content into a single div and it is then inserted with the div {position:absolute;top:50%;left:50% margin:-25%;}
  • Turning the page into a table : In the CSS of the <body> tag, place it so that it is displayed as a table: body{display:table} and then place them so that they are displayed as table notes: div{display:table-cell;} , this will center vertically.
  • Setting HTML and BODY size to 100% : When <html> and <body> are set to a fixed height they can be used as a reference for height of <div> . To do this: html,body{height:100%} so it will be possible to use the margin attribute in the margin attribute like this: div{margin-top:10%}
  • 12.12.2013 в 01:28
    1

    I did the table-cell method until I discovered a better one:

    .element {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    

    Apply this to the element you want to center vertically. No height control is required on the parent element, much less on the desired element.

    Remembering that my method is very similar to one posted here, but I'm using position: relative, rather than absolute.

        
    28.01.2014 в 20:12