How to align a div vertically on full unknown width? [duplicate]

Question

This question already has answers here:

How to center div in the page? (Height & Width)? (2 answers)

Closed 9 years ago.

I mean, if i have a div, with 200px of height and 200px of width, and i want to align it vertically (i can align it horizontaly with "margin: auto", but, is there a way to align it vertically without knowking the height of the screen?

Thanks and sory for my english, it's not my native language

edit: height of the screen

Answer 1

Here's an example, FIDDLE

div {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
}

Answer 2

Centering things with table display is pretty handy... Take a look at this this: http://jsfiddle.net/F9J4B/

Note that this is not "layouting with table"... It's just three divs that are using the table's display rules. No semantics rules are broken =)

HTML

<div class="table">
    <div class="tr">
        <div class="td">
            <p>Hello! I'm a DOM element. <br>I can be whatever size i want, and still still be in the center of things.</p>
        </div>
    </div>
</div>

CSS

body, 
html {
    height:100%
}
.table {
    width: 100%;
    height: 100%;
    display: table;
    background-color: #eee;
}
.tr {
    display: table-row;

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

Answer 3

Centering a box inside another box:

div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

regardless of the size of the boxes.

The outer box may need position: relative; for the inner boxes' positioning to work.

Answer 4

The Media Query handles the image when the screen gets too small.

.vertcenterdiv {
     position: absolute; 
     background-image: url('http://upload.wikimedia.org/wikipedia/commons/2/27/Square_200x200.svg'); 
     background-position: center center; 
     background-repeat: no-repeat; 
     background-size: 100% auto;  
     height: 200px; 
     width: 200px; 
     top: 50%; 
     left: 50%; 
     margin-top: -100px; 
     margin-left: -100px;
}
@media (max-width: 200px) {
     .vertcenterdiv {
          position: absolute; 
          height: 100%; 
          width: 100%; 
          top: 0; 
          left: 0; 
          margin-top: 0; 
          margin-left: 0;
     }
}