垂直和水平居中 div 没有定义的高度 [重复]

Question

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

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

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

这个问题与以前的主题不同，因为它被问到的时间，它被比较的类似问题是从 2011 年开始的，其中发生了很多变化，并且向 CSS3 添加了新功能，可以满足要求更好。

Answer 1

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

• 你可以使用css3 flexbox:

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

  Updated Fiddle

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

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

  Updated Fiddle

浏览器支持：

• 弹性盒@caniuse
• 变换@caniuse

旁注：如果你想支持旧浏览器，你可能需要 js 后备

Answer 2

您可以通过将 top:50%; 和 transform: translateY(-50%); 设置为 .card 来做到这一点

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

更多信息：

• W3.ORG - CSS Transforms Module Level 1

• Mozilla MDN - CSS Transform