Javascript 垂直和水平居中div，无定义高度

我希望在页面的中心显示一个div，而不必为元素定义一个设置的高度，以便该高度能够动态地适应页面的内容。这可能吗？我愿意使用JS/jQuery解决方案，只要它们有优雅的回退，但我更喜欢纯CSS解决方案

这是我当前的代码，它将使div居中，但我必须包含一个高度

HTML

---

这个问题与以前的主题不同，因为它被问到的时间不同，与之相比，类似的问题始于2011年，在2011年，CSS3发生了很多变化，并添加了新功能，可以更好地满足要求。

如果您想要一个仅CSS的解决方案，而不指定高度：

• 您可以使用：

• 或者您可以使用翻译技术：

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

浏览器支持：

• 柔性箱@
• 转化@

---

旁注：如果你想支持旧浏览器，你可能需要js回退，你可以通过设置

top:50%来实现和
转换：translateY（-50%）至
。卡片

JSFIDLE-or
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%);
}

有关更多信息：





你需要水平或垂直对齐中心？？我看不到。当你降低高度时，它会在你的小提琴中起作用。试试下面的CSS方法。不需要JS-这些方法适用于动态尺寸。@AshishBalchandaniboth@bowheart它会使内容调整到我不想要的整个屏幕，它应该适合内容。你的flexbox解决方案真的很好+0001:）@TJ翻译技术导致模糊效果，另一个答案中已经提到。@Imran我在上面共享的小提琴中没有看到任何模糊效果…@TJ请查看更新的帖子我在网上看到一篇文章，其中描述了此问题的bug（查看更新）@Imran检查一下，如果你没有使用半像素变换，那么它工作得很好-我的解决方案没有使用半像素its
transform:translateY（-50%），因此无需担心！：）我在一些页面上遇到了模糊效果。@Imran并应用
变换样式：preserve-3d没有解决您的问题，您可以共享一个工作演示吗？
body {
  display:flex;
  align-items:center;
}

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

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%);
}