css。绝对位置DIV中的垂直中心

用户名

我试图垂直放置绝对没有运气的div的中心孩子。有人对此有很好的解决方案吗?(淘汰js)。

<div class="title">
    <div>
        <span>03</span>
    </div>
    <h2>
        title
    </h2>
</div>

CSS:

.title {
    height: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
}

.title div,h2 {
    //i want to center these two verical
}
拉尔夫

一个现代的方法是这样的(我建议额外的div):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.title {
    height: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
}

.title-inner {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

</style>
</head>
<body>

<div class="title">
    <div class="title-inner">
        <div>
            <span>03</span>
        </div>
        <h2>
            title
        </h2>
    </div>
</div>

</body>
</html>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Ipad垂直中心上的iOS Safari(位于绝对位置的容器中)

来自分类Dev

CSS绝对垂直中心与像素偏移

来自分类Dev

垂直和水平在div中居中div,绝对位置

来自分类Dev

具有绝对位置的div中的中心块

来自分类Dev

在绝对位置的div中垂直对齐按钮

来自分类Dev

CSS:相对位置在相对位置div中的绝对位置

来自分类Dev

CSS的垂直中心

来自分类Dev

CSS垂直中心

来自分类Dev

在绝对位置的div中滚动div

来自分类Dev

CSS在中心并排对齐两个DIV。绝对位置

来自分类Dev

垂直中心div与flexbox

来自分类Dev

固定div的垂直中心

来自分类Dev

div内垂直中心

来自分类Dev

在绝对位置的div中截断文本

来自分类Dev

将Div置于绝对位置的中心的更好方法是?

来自分类Dev

HTML / CSS-根据页面中心分配绝对位置

来自分类Dev

在绝对位置的div中垂直和水平对齐锚点

来自分类Dev

将Div与绝对位置垂直对齐

来自分类Dev

使用绝对位置水平和垂直居中div

来自分类Dev

与CSS垂直对齐时何时使用绝对位置与相对位置

来自分类Dev

与CSS垂直对齐时何时使用绝对位置与相对位置

来自分类Dev

CSS:绝对位置div高于父div

来自分类Dev

居中div绝对位置?

来自分类Dev

浮点内的垂直中心div

来自分类Dev

CSS在容器中添加两个绝对位置的div

来自分类Dev

CSS 相对与绝对位置

来自分类Dev

如何在位置相对的div内将绝对位置的div对齐到中心?

来自分类Dev

对齐元素中心,保持绝对位置

来自分类Dev

HTML CSS Div重叠绝对和相对位置