Make box vertically in middle

Question

How i make div with different sizes vertically in middle of page.

For example with 100px height.

like windows 8 messages.

Thnk you. Mohammad.

something like this : http://stackoverflow.com/questions/24245616/vertically-centering-content-in-html/24245798#24245798 or this : http://stackoverflow.com/questions/25162020/vertically-align-middle-in-bootstrap-column/25162229#25162229 — Joffrey Maheo, Sep 04 '14 at 12:06

score 3 · Answer 1 · answered Sep 04 '14 at 12:14

If I understand the question, this is how one of the options DEMO

<div class="wrap">
  <div class="block">text</div>
  <div class="block">text</div>
  <div class="block">text</div>
  <div class="block">text</div>
  <div class="block">text</div>
  <div class="block">text</div>
  <div class="block">text</div>
  <div class="block">text</div>
</div>

.wrap {
  width: 800px;
  margin: 0 auto;
  background: #ccc;
  display:block;
  overflow: hidden;
  padding: 100px 0 0 0;
}
.block {
  width: 100px;
  height: 50px;
  background: green;
  margin: 10px auto;
  display:block;

}
.block:nth-of-type(2) {
  height: 80px;
}
.block:nth-of-type(4) {
  height: 150px;
}
.block:nth-of-type(7) {
  height: 20px;
}

score 1 · Answer 2 · answered Sep 04 '14 at 12:12

1

If you don't need to support decrepit browsers, this is probably the easiest way. The dimensions of the element don't matter:

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

DEMO

answered Sep 04 '14 at 12:12

Turnip

35,836
15
89
111

score 0 · Accepted Answer · answered Sep 04 '14 at 12:06

0

Use margin:auto in combination with position: absolute. Then declare all the left/top/right/bottom as zero. It only works if you have added a height in your css. It doesn't work for variable heights.

See this fiddle http://jsfiddle.net/mBBJM/1/

answered Sep 04 '14 at 12:06

TeeDeJee

3,756
1
17
24

Make box vertically in middle

3 Answers3