实现元素水平垂直居中的4种方法

最新推荐文章于 2025-06-16 16:15:00 发布

青衫客~

最新推荐文章于 2025-06-16 16:15:00 发布

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML/CSS 文章标签：定位 css html flex css3

本文链接：https://blog.youkuaiyun.com/weixin_45297746/article/details/108889292

本文介绍了4种CSS方法实现元素的垂直水平居中：1) 使用弹性盒模型flex；2) 通过定位position及外边距；3) 结合position和transform的translate属性；4) 利用position与margin：auto。每种方法都有其适用场景和特点。

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

引

元素的垂直水平居中在网页开发中极为常见，其实现方法也多种多样，接下来将介绍4种实现元素垂直水平居中的方法。实现效果如图：在这里插入图片描述

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

一、使用弹性盒模型flex实现

设置父元素的布局方式为flex， display: flex;
设置父元素在水平方向上的对齐方式为居中对齐，justify-content: center;
设置父元素在垂直方向上的对齐方式为居中对齐， align-items: center;

 <style>
 //标签默认会有内外边距，为了防止影响效果，一般先清除所有元素的默认边距
        * {
   
   
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .father {
   
   
            display: flex;
            width: 400px;
            height: 400px;
            justify-content: center;
            align-items: center;
            background-color: skyblue;
            margin: 200px auto;
        }