中心标记垂直和水平，没有定义的高度 [英] Center div vertically and horizontally without defined height

问题描述

我想在我的页面中心显示一个div，而不必为元素定义一个设置的高度，因此高度会动态地适合页面的内容。这可能吗？我开放使用JS / jQuery解决方案，只要他们有优雅的后备，但我更喜欢纯CSS解决方案。

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

HTML

  ; div class =card> Lorem ipsum dolor sit amet，minim moestie 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。没有孤岛。 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; * / 
} 
  

小提琴链接

此问题与以前的主题不同，因为时间已经被问到，它已经被比较的类似的问题是从2011年，其中很多已经改变，新的功能已经添加到CSS3，可以更好地满足要求。

top：50％; 和 transform：translateY -50％）; 到 .card

JSFiddle - DEMO 或全屏视图 h2>

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转换

I want to display a div in the centre of my page without having to define a set height for the element so that the height fits the content of the page dynamically. Is this possible? I am open to using JS/jQuery solutions as long as they have graceful fallbacks but I would prefer pure CSS solution.

Here is my current code, it will centre the div, but I have to include a height.

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

This question is different from previous topics because of the time it has been asked, the similar question that it has been compared to is dated from 2011 in which a lot has changed and new functions have been added to CSS3 that could fulfil the requirement better.

解决方案

You could do it by set top:50%; and transform: translateY(-50%); to .card

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

For more info:

• W3.ORG - CSS Transforms Module Level 1

• Mozilla MDN - CSS Transform

这篇关于中心标记垂直和水平，没有定义的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！