css系列之左右+垂直布局（传统和flex）

最新推荐文章于 2025-06-06 12:08:33 发布

王不留行qwer

最新推荐文章于 2025-06-06 12:08:33 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_34134278/article/details/78824381

本文介绍了两种实现网页元素垂直居中的方法：一是使用CSS的position属性结合transform进行精确定位；二是利用Flexbox布局，使子元素在其父容器内水平及垂直居中。这两种方法各有优势，适用于不同的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

传统垂直布局

知识点：position的fixed和absolute会脱离文档流，而relative不会。

1、脱离文档流，相对于父元素布局fixed/absolute

使用了css3的transform，注意兼容性

 <div class="center"></div>

<style>
        .center {
            position: fixed;
            top: 50%;
            left: 50%;
            background-color: #000;
            width: 50%;
            height: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
        }
    </style>

flex布局

注意：父元素一定要有明确的width和height
使用flex，注意兼容性

<div class="f">
    <div class="s"></div>
</div>

html,body{
            width: 100%;
            height: 100%;
        }
        .f {
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
            display: flex;
        }
        .s{
            width: 100px;
            height: 100px;
            background: red;
        }