How to center the content of an element vertically?

Asked

Viewed 20,110 times

40

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

I was able to move the content from half down container, however, from half up the space is "left".

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 that the element .container overlap the parent element, as if it were an indicator of loading on top of only one element on the page.

css html
  • 1

    It is really necessary that the element have absolute position? Or just your container?

  • 1

    I updated the question with a better description of the objective.

6 answers

30


In this way it 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 on Jsfiddle

  • Transform is CSS3?

  • No, translateX and translateY are trying to find out if it is new implementation.

  • That’s right!!!

19

Using the given example, the problem is in the element with the class content which does not have a defined height, which makes it impossible to calculate the centre of the height.

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

Solution

One of the possible solutions is to indicate to the browser that the elements should assume the visual behaviors 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 on Jsfiddle

Nevertheless, it is necessary to remove the definition position:absolute because it conflicts with the new definition display:table-cell that in its essence cannot 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 so that it can make a container for other child elements.

  • Add body { height: 100%; margin: 0; padding: 0;} that your example gets even better (:

10

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

Place your element in all positions (top, left, bottom and right) as 0. This will cause it to "stretch out" to occupy the entire screen. But as it is smaller than the screen, put the margin as auto will cause it to auto-adjust to 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 on Jsfiddle.

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

4

Dude, to center both vertical and horizontal in this case...you need to set the element size, and beyond the top:50% use margin-top negative with half of the height of 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;
}

3

If it’s to center a DIV on a page, so far they haven’t created any way to do it, now there are 3 ways to do it:

  1. Using an Absolute DIV: you place all your page content in a single div and this is then inserted with the tags div {position:absolute;top:50%;left:50% margin:-25%;}
  2. Turning the page into a table: in the tag CSS <body> place it to be displayed as a table: body{display:table} and then place them so that they are displayed as table ballots: div{display:table-cell;}, this will center vertically.
  3. Setting HTML and BODY size to 100%: when the <html> and the <body> are defined with a fixed height they can be used as reference for the height of <div>. For that do: html,body{height:100%} so it will be possible to use the margin top value in the margin attribute like this: div{margin-top:10%}

1

I did the table-Cell method until I discovered an even 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 and much less on the desired element.

Remembering that my method is very similar to one posted here, but I’m using position: relative instead of Absolute.

Browser other questions tagged css html

You are not signed in. Login or sign up in order to post.