Center div vertically and horizontally without defined height [duplicate]

Question

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.

Answer 1

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:

• W3.ORG - CSS Transforms Module Level 1

• Mozilla MDN - CSS Transform

Answer 2

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:

• flexbox @caniuse
• transform @caniuse

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