6

I want to display a div in the centre of my page without having to define a set height for the element so that the height fits the content of the page dynamically. Is this possible? I am open to using JS/jQuery solutions as long as they have graceful fallbacks but I would prefer pure CSS solution.

Here is my current code, it will centre the div, but I have to include a height.

HTML

    <div class="card">Lorem ipsum dolor sit amet, minim molestie argumentum est at, 
pri legere torquatos instructior ex. Vis id odio atomorum oportere, quem modo fabellas sit 
at, dicat semper est ne. Apeirian detraxit pri eu. No solum accusam has. Ius ne harum mundi 
clita, eu pro tation audiam.
    </div>

CSS

.card {
    background-color: #1d1d1d; /* IE fallback */
    background-color: rgba(29, 29, 29, 0.95);
    color: #fff;
    display: inline-block;
    margin: auto;
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;   
    padding: 30px 35px;
    outline: 2px solid #3B3A37;
    outline-offset: -9px;
    width: 320px;
    height: 350px;
    /*margin: 0 auto;*/
}

Fiddle Link

This question is different from previous topics because of the time it has been asked, the similar question that it has been compared to is dated from 2011 in which a lot has changed and new functions have been added to CSS3 that could fulfil the requirement better.

InvalidSyntax
  • 9,131
  • 20
  • 80
  • 127

2 Answers2

8

You could do it by set top:50%; and transform: translateY(-50%); to .card

JSFiddle - DEMO or Full Screen View

CSS:

html, body {
    height:100%;
    margin: 0px;
}
.card {
    background-color: #1d1d1d;
    /* IE fallback */
    background-color: rgba(29, 29, 29, 0.95);
    color: #fff;
    padding: 30px 35px;
    outline: 2px solid #3B3A37;
    outline-offset: -9px;
    width: 320px;
    position: relative;
    margin: 0 auto;
    top:50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

For more info:

Anonymous
  • 10,002
  • 3
  • 23
  • 39
  • I have come across an article online which describes a bug with this issue (look at the update) http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ – InvalidSyntax Sep 14 '14 at 17:30
  • 1
    @Imran check this out if you're not using half pixel transform then it works just fine - http://martinkool.com/post/27618832225/beware-of-half-pixels-in-css and my solution doesn't use half pixel its `transform: translateY(-50%);`, so there's no need to worry! :) – Anonymous Sep 14 '14 at 17:36
  • 1
    I am experiencing the blur effect on some of my pages. – InvalidSyntax Sep 14 '14 at 20:19
  • @Imran and apply the `transform-style: preserve-3d;` didn't solved your problem and could you share a working demo? – Anonymous Sep 14 '14 at 20:25
  • http://shoutkey.com/build – InvalidSyntax Sep 14 '14 at 20:27
4

If you want a CSS only solution without specifying height:

  • You can use css3 flexbox:

    body {
  display:flex;
  align-items:center;
}

    Updated Fiddle

  • Or you can use the translate technique:

    .card {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  /* other styles */
}

    Updated Fiddle

browser support:

Side note: You might need js fallbacks if you want to support old browsers

T J
  • 42,762
  • 13
  • 83
  • 138