未知高度div垂直居中

最新推荐文章于 2022-09-01 20:16:38 发布

DrinkSiMei

最新推荐文章于 2022-09-01 20:16:38 发布

阅读量543

点赞数

分类专栏： css示例文章标签： css

css示例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

未知高度div垂直居中

最近写css样式碰到一个问题，div需要垂直居中但div的高度不是固定的，不能使用line-height属性进行赋值操作。查了一下之后采用了如下方式解决。

转自他人的博客(非原创)，这里只做一个记录，方便以后使用。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>未知宽高元素水平垂直居中</title>
</head>
<style>

.parent1{
    display: table;
    height:300px;
    width: 300px;
    background-color: #FD0C70;
}
.parent1 .child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
}

</style>
<body>
    <div class="parent1">
        <div class="child">hello world-1</div>
    </div>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

DrinkSiMei

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
未知高度div垂直居中

未知高度div垂直居中最近写css样式碰到一个问题，div需要垂直居中但div的高度不是固定的，不能使用line-height属性进行赋值操作。查了一下之后采用了如下方式解决。转自他人的博客(非原创)，这里只做一个记录，方便以后使用。代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>未知
复制链接

扫一扫