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

Posted 2023-03-05

【中文标题】垂直和水平居中 div 没有定义的高度 [重复]

【英文标题】：Center div vertically and horizontally without defined height [duplicate]

【发布时间】：2014-11-08 04:35:37

【问题描述】：

我想在我的页面中心显示一个 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 添加了新功能，可以满足要求更好。

【问题讨论】：

你需要水平居中对齐，还是垂直居中？？

我没看到。当你离开高度时，它在你的小提琴中起作用。

尝试this answer 中介绍的 CSS 方法。无需 JS - 这些方法适用于动态尺寸。

@AshishBalchandani 两者

@bowheart 它将使内容调整到我不想要的整个屏幕，它应该适合内容。

【参考方案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 后备

【讨论】：

您的 flexbox 解决方案非常好。 +0001 :)

@TJ 翻译技术会导致另一个答案中提到的模糊效果。

@Imran 我在上面分享的小提琴中看不到任何模糊效果...

@TJ 请查看更新后的帖子

【参考方案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

【讨论】：

我在网上看到一篇文章描述了这个问题的一个错误（查看更新）zerosixthree.se/…

@Imran 如果您不使用半像素变换，请检查一下，然后它工作得很好 - martinkool.com/post/27618832225/beware-of-half-pixels-in-css 我的解决方案不使用半像素它的 transform: translateY(-50%);，所以没有必要担心！ :)

我的某些页面出现模糊效果。

@Imran 并应用 transform-style: preserve-3d; 没有解决您的问题，您能分享一个工作演示吗？

shoutkey.com/build