web布局-垂直居中

最新推荐文章于 2024-02-06 16:30:00 发布

Raaabbit

最新推荐文章于 2024-02-06 16:30:00 发布

阅读量345

点赞数

分类专栏： Web布局文章标签：布局 web

本文链接：https://blog.csdn.net/github_39457740/article/details/77962695

版权

Web布局专栏收录该内容

7 篇文章 0 订阅

订阅专栏

垂直居中

需求：父子容器高度不固定情况下，实现子元素在父元素内居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试专用</title>
    <style type="text/css">
        .parent{background-color: gray; width: 100px; height: 300px;}
        .child{background-color:orange;width: 100%; }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">子容器</div>
    </div>
</body>
</html>

解决方案1：table-cell + vertical-align

原理：将父元素设置为标单元格之后，vertical就可以生效了

.parent{display: table-cell;vertical-align: middle;}

优点：兼容性好，兼容到ie8+，对于更低版本，将结构换为table结构
缺点：会影响子元素内的元素，需要额外设置

解决方案2：absolute + transform

.parent{position: relative;}
.child{position: absolute;top: 50%;transform: translateY(-50%);}

优点：不影响其他元素
缺点：兼容问题

解决方案3：flex + align-items

原理：当设置父元素为flex，子元素变为flex-item，默认align-items是拉伸的，高度变为和父元素相同

.parent{display:flex;align-items:center;}

优点：只对父元素进行设置
缺点：兼容性问题

Raaabbit

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web布局-垂直居中

垂直居中需求：父子容器高度不固定情况下，实现子元素在父元素内居中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试专用</title> <style type="text/css"> .parent{background-color: gray; width: 100
复制链接

扫一扫

专栏目录