父级高度未知，实现子元素居中

最新推荐文章于 2023-02-15 23:09:33 发布

AryaoO

最新推荐文章于 2023-02-15 23:09:33 发布

阅读量681

点赞数

分类专栏：前端开发基础文章标签：子元素居中父元素高度未知

本文链接：https://blog.youkuaiyun.com/Selina_Chan/article/details/79004906

版权

前端开发基础专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一种使用弹性盒布局（Flexbox）实现元素在页面上的居中显示的方法。通过简单的HTML结构与CSS样式，实现了不同大小元素在父容器中的水平与垂直居中效果。

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

emmmm，使用弹性盒布局就好了哇~~~

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        .parent {
            display: flex;
            /*justify-content属性定义了子项目在主轴上（X轴）的对齐方式。*/
            justify-content: center;
            /*align-items属性定义子项目在交叉轴（Y轴上）上如何对齐。*/
            align-items: center;
            height: auto;
            width: auto;
        }
        .son1 {
            width: 200px;
            height: 150px;
            background: red;
            /*设置偏移值left、top 和 负的margin使得子元素在父元素中居中*/
        }
        .son2 {
            /*子元素宽高随便设置*/
            width: 200px;
            height: 50px;
            background: lightgoldenrodyellow;
            /*align-self: center;*/
            /*可以不用设置：align-self属性允许单个子项目有与其他子项目不一样的对齐方式，可覆盖父元素的align-items属性。
         * 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch
         */
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>

</html>