Center div vertically and horizontally without defined height [duplicate]

Answer 1

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