在没有定义高度的情况下，垂直和水平居中div。

Question

在没有定义高度的情况下，垂直和水平居中div。

6

我想在页面的中心显示一个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 链接

这个问题与以前的主题不同，因为它被问及的时间不同。与其被比较的相似问题是在2011年提出的，而自那时以来，CSS3已经增加了很多新功能，可以更好地满足要求。

- InvalidSyntax

1

您需要水平或垂直居中对齐吗？ - Ashish Balchandani

我没看到它。当您去掉高度时，它在您的fiddle中可以工作。 - bowheart

2

尝试使用此答案中介绍的CSS方法。无需JS - 这些方法适用于动态尺寸。 - Josh Crozier

@AshishBalchandani 两者皆可 - InvalidSyntax

@bowheart 这会使内容调整为整个屏幕大小，而我不想要这样，它应该适合内容。 - InvalidSyntax

2个回答

4

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

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

浏览器支持：

flexbox @caniuse
transform @caniuse

注意：如果您想支持旧浏览器，可能需要使用js回退。

- T J

你的Flexbox解决方案真的很好。+0001 :) - Anonymous

@TJ 在其他答案中已经提到了使用翻译技术会导致模糊效果。 - InvalidSyntax

@Imran，我在上面分享的fiddle中没有看到任何模糊效果... - T J

@TJ 请检查更新的帖子。 - InvalidSyntax

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anonymous · Accepted Answer

你可以通过将 .card 设置为 top:50%; 和 transform: translateY(-50%); 来实现这一点。

JSFiddle - 演示或全屏查看

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转换模块第1级

Mozilla MDN - CSS转换

在没有定义高度的情况下，垂直和水平居中div。

JSFiddle - 演示 或 全屏查看

JSFiddle - 演示或全屏查看