Vertically aligning content to middle when outer containers are height: 100%

Question

So I am vertically aligning content to middle with ghost element method:

 html {height: 100% } body {min-width: 100% }
.block {
  text-align: center;
  height: 600px;
}

.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

.centered {
  display: inline-block;
  vertical-align: middle;
}

It's a straightforward method, I get the content in the middle but I really dont want any fixed heights, I want it to be dynamical. Though I added height: 600px in code sample, because it gets it to seemingly work but not dynamically.

When I add a fixed height I get what is on the left side of the picture but I also want it to be like right side when the viewport height is smaller so it would cut the top and bottom empty spaces, which can't be done with fixed height.

So any other methods or solutions that work good are appreciated! Also IE8 support would be also nice.

Update: https://jsfiddle.net/duthzvyo/ Make it so when you squish the viewport height that no scrollbar happens the grey box so to speak squishes as well.

Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — TylerH, Oct 13 '15 at 19:48
Use a percentage based height then. Just a note that every parent element must also have a height. You might be better off using javascript to do that part though. — Ryan Wheale, Oct 13 '15 at 20:02
if you want to support Ie8 , then display:table/table-cell/vertical-align are just fine . https://jsfiddle.net/duthzvyo/1/ with borders on div to show where each stands https://jsfiddle.net/duthzvyo/2/ — G-Cyrillus, Oct 13 '15 at 20:19
@Helpme well it is only to show that any height does work. You need to tell or show us what would increase height (aside contents) or if you want the full height screen wich still turns to be a fixed height at 100% of viewport ;) — G-Cyrillus, Oct 14 '15 at 13:21

trusktr · Answer 1 · 2015-10-13T19:54:28.340

If you want to use purely CSS (i.e. not scripting the width dynamically with JavaScript in your current setup) then I'd recommend using the newer flex-box model, which is a lot more powerful.

See some tutorials on flex-box.

Other solutions (potentially advanced because they require JavaScript coding, but easier in concept if you know how to code in JavaScript) include Famo.us and (work in progress) infamous.

Also check out the following, based on Cassowary Constraint Solvers:

https://gridstylesheets.org/

https://github.com/IjzerenHein/autolayout.js

These last two libraries make it really really easy to center elements (among other things) within dynamic layouts, where you define your layout rules in a declarative manner similar to CSS, but they're much better than traditional CSS in my humble opinion.

I'd recommend checking those tools out. :)

Vertically aligning content to middle when outer containers are height: 100%

1 Answers1