不定宽高，实现盒子左右垂直居中

最新推荐文章于 2023-12-28 14:01:48 发布

笑笑书生

最新推荐文章于 2023-12-28 14:01:48 发布

阅读量3.1k

点赞数

分类专栏：学习日记 CSS

本文链接：https://blog.youkuaiyun.com/qzt1204/article/details/80502354

版权

本文介绍了三种方法实现CSS布局中不定宽高盒子的左右垂直居中：1) 使用CSS3的transform属性；2) 利用flex布局；3) 通过绝对定位。详细代码和兼容性信息在内容中给出。

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

对于CSS布局，大部分的前端er可能都是非常熟悉，而对于盒子的左右垂直居中，定宽和定高想必也不是什么难事，但是最近小编面试的过程中发现很多面试官会问到在盒子不定宽高的垂直居中的方法，今天小编就来给大家总结以下在盒子不知道宽高的情况下如何自适应左右垂直居中，废话不多说，直接看代码：

1.利用CSS3的 transform 属性（兼容IE8以上，不包括IE8）

html：

<div class="container">
        <div class="box">
            不定宽高实现左右垂直剧中
        </div>
    </div>

css:

<style>
        *{
            margin: 0;
            padding:0;
        }
        .container{
            display:relative
        }
        .box{
            background-color:#ff0000;
            transform: translate(-50%,-50%);
            position: absolute;
            top: 50%;
            left: 50%;
        }
    </style>

2 . 利用 <

最低0.47元/天解锁文章