gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 14:47:06 25 4
gpt4 key购买 nike

<分区>

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com