CSS vertically align div while maintaining aspect ratio

Question

I used the JsFiddle at jsfiddle.net/5tzk3/10. I changed it to display the div as square shaped dialog (both horizontally and vertically centered). The result is at jsfiddle.net/5tzk3/548.

As you see, centering horizontally was easy, but I could not get it centered vertically. Anyone who knows how to do that with pure CSS?

Edited code below:

<div class="blind">
    <div class="wrapper">
        <div class="main">
            I'm your div with an aspect-ratio of 1:1!
        </div>
    </div>
</div>

html, body, .blind {
    height: 100%;
    width: 100%;    
}

.blind {
    left: 0;
    position: fixed;
    text-align: center;
    top: 0;
}

.wrapper {
    display: inline-block;
    margin: auto;
    position: relative;
    width: 50%;
}

.wrapper:after {
    content: '';
    display: block;
    padding-top: 100%;
}

.main {
    background-color: rgb(0, 162, 232);
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0; 
}

repeated question : http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css — ProllyGeek, Dec 01 '13 at 18:23

score 1 · Answer 1 · answered Dec 01 '13 at 18:22

1

Use display: table for the parent div, and display:table-cell; vertical-align: middle for the content div which you want to vertically center.

answered Dec 01 '13 at 18:22

kumarharsh

18,961
8
72
100

score 0 · Answer 2 · answered Dec 01 '13 at 18:24

0

The most common way of doing this if you've got an element with known dimensions is to use positioning to firstly position it top: 50% (which places the top edge of the element 50% of the way down) and then use a negative top-margin of half the height of the element (pulling it back up by half it's height).

To give you an example, to absolutely position a 200x200 element dead-centre on the page you would use:

.element{
    display: block;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    margin-top: -100px
}

Alternatively, you can use a combination of display: table and then display: table-cell on the parents to open up the ability to use vertical-align although this is a bit nasty when it comes to laying out elements around it.

answered Dec 01 '13 at 18:24

johnkavanagh

4,614
2
25
37

absolute positionning can make part of your content disseapper if window shrinks too much , it's an old trick back from the 90's :) It is not fluid and will not keep ratio , it just remains the size it's given – G-Cyrillus Dec 02 '13 at 15:47
Yes: this trick can make content flow off the edges if the window size is decreased enough. This is the same as the use of any width-based CSS where the element's specified width exceeds the width of the window. This could easily be mitigated by using `max-width: 100%` but as you'll see from the question's posted code, he's using pre-set dimensions. – johnkavanagh Dec 02 '13 at 15:53

score -1 · Answer 3 · answered Dec 01 '13 at 18:35

you can drop absolute positionning and use either display:table or inline-block with pseudo elements.

here is a mixed of the 2 methods

1) html/body as a table one cell 2) inner content with ratio preserved and content as inline box set in the middle.

.ratio1-1 {
  width:25%;
    vertical-align:middle;
  margin:auto;
  background:turquoise;
}
.ratio1-1:before {
  content:'';
  padding:50% 0;
  width:0;
  display:inline-block;
  vertical-align:middle;
}
.ib {  
  display:inline-block;
  vertical-align:middle;
}

/* center body content as a table cell */
html {
  height:100%;
  width:100%;
  display:table;
}
body {
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

<div class="ratio1-1">
  <div class="ib">content in middle</div>
  </div>

demo: http://codepen.io/gc-nomade/pen/pubFm

i forgot to mention the use of units vw to keep the ratio of a box depending on window's width or vh if you take window's height as reference :) ... display:table is the most fluid way to vertical-align in center, it won't hide anything and will even allow scrolling , unless you care for IE6/7 then , inline-block methode works fine (even for IE5.5) if you know about 'haslayout or not' :) — G-Cyrillus, Dec 02 '13 at 15:53

CSS vertically align div while maintaining aspect ratio

3 Answers3

Linked