Here's an example, FIDDLE
div {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
Вопрос
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
Решение 2
Here's an example, FIDDLE
div {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
Другие советы
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;
}
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.
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;
}
}