Vertically center an element on the page with CSS?

Question

I need to vertically centre an element of unknown height on a page.

I can vertically center it relative to a containing div with this:

.one {
  background: grey;
  width: 50%;
  position: relative;
  top: 50%; 
 transform: translateY(-50%); 
  margin: auto;
}
.cont {
  background: blue;
  height: 300px;
}

http://codepen.io/anon/pen/lfrJx

However I cant get it to center vertically on the page:

.one {
  background: grey;
  width: 50%;
  position: relative;
  top: 50%; 
 transform: translateY(-50%); 
  margin: auto;
}
.cont {
  background: blue;
  height: 100%;
}

http://codepen.io/anon/pen/gqLcB

[**CSS-Tricks.com - Complete Centering Guide**](http://css-tricks.com/centering-css-complete-guide/) — Paulie_D, Oct 17 '14 at 11:09
http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally — Hashem Qolami, Oct 17 '14 at 11:51

score 1 · Answer 1 · answered Oct 17 '14 at 13:22

1

put this css :)

.one {
  background: grey;
  width: 50%;
  position: relative;
  margin-top:auto;
  margin-bottom:auto;
  vertical-align:middle;
}
.cont {
display: table-cell;
  background: blue;
  width:100%;
}

answered Oct 17 '14 at 13:22

Samer Allahham

76
11

score 0 · Answer 2 · answered Oct 17 '14 at 11:31

0

http://codepen.io/anon/pen/mFGeH

.cont {
  position:absolute;
  background: blue;
  height: 100%;
  width:100%;
}

answered Oct 17 '14 at 11:31

Favitalegur

36
2

Vertically center an element on the page with CSS?

2 Answers2