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

参见英文答案 > How to center a “position: absolute” element24个
我想在页面的中心显示一个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,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中,可以更好地满足要求.

解决方法

你可以通过机顶：50％;和转换：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,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%);
}

欲了解更多信息：

• 07002

• 07003

原文地址：https://www.jb51.cc/js/154627.html