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

您可以将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

Answer 2

如果你想要一个没有指定高度的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

浏览器支持：

flexbox @ caniuse
transform @ caniuse

附注：如果您想支持旧浏览器，则可能需要js后备

垂直和水平居中div没有定义的高度

2 个答案:

JSFiddle - DEMO或Full Screen View