CODEWITHSUNDEEP
htmlcssfullscreenvertical-alignment
user3358714
user3358714

Reputation: 129

Vertically centre variable-height divs within fullscreen wrapper

The wrapper is 1170px wide - variable/full-screen height Child divs are % width - variable in height (though i've specified px in the jsfiddle)

I've used the table(parent)/table-cell(child) method and that doesn't work. Margin 0 Auto also doesn't seem to do anything - I'm not sure if it has anything to do with the relative position attribute of the child divs...

https://jsfiddle.net/x3cm32my/

.wrap {
  background: grey;
  margin-left: auto;
  margin-right: auto;
  width: 1170px;
  min-height: 100vh;
  vertical-align: middle;
  text-align: left;
  display: table;
}

.mod-left {
  background: blue;
  margin:0 auto;
  width: 30%;
  height: 100px;
  float: left;
  vertical-align: middle;
  position: relative;
  display: table-cell;
}

.mod-right {
  background: green;
  margin:0 auto;
  width: 65%;
  float: right;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 150px;
  position: relative;
}

Would appreciate any tips!

Upvotes: 0

Views: 27

Answers (2)

Aman
Aman

Reputation: 640

you can also use padding at .wrap to make your child in center of their parent.

for example

padding: 40vh 0;

Upvotes: 0

Tsumiqt
Tsumiqt

Reputation: 83

What about trying flexbox? To center your content use the following:

.wrap { background: grey; margin-left: auto; margin-right: auto; width: 1170px; min-height: 100vh; text-align: left; display: flex; justify-content: center; align-items: center;}

Upvotes: 1

Related Questions