设置未知宽高元素水平垂直都居中的几种方法

最新推荐文章于 2023-03-21 11:02:24 发布

不染126

最新推荐文章于 2023-03-21 11:02:24 发布

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/qq_59541478/article/details/126649877

本文介绍了四种让元素在网页中水平垂直居中的方法：1) 使用绝对定位结合transform属性；2) 利用弹性盒子布局；3) 将父元素设为表格单元格并利用text-align和vertical-align；4) 设置为网格布局。每种方法都有其适用场景，可灵活运用在不同的网页设计中。

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

1.第一种是使用绝对定位的方法

通过left,top以及transform属性使元素水平垂直居中，其中translate属性取值为负数时表示向左和向下移动

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="box"></div>

效果图：

2.第二种方法是把元素的父盒子设置为弹性盒子

通过设置父盒子为弹性盒子，并设置子元素在主轴上居中对齐（justify-content: center;），再设置子元素在主轴和侧轴上居中对齐（align-items: center;）

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            height: 600px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid black;
        }
        
        .child {
            width: 400px;
            height: 200px;
            background-color: red;
            border: 1px solid blue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="child"></div>
    </div>
</body>

效果图：

3.第三种是把父盒子设置为表格元素

通过设置text-align: center;和vertical-align: middle;将子元素水平垂直居中，要注意的是需要把子元素设置成行内块元素，因为行内元素不能设置宽高

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 800px;
            height: 600px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            border: 1px solid black;
        }
        
        .child {
            width: 400px;
            height: 200px;
            background-color: red;
            border: 1px solid blue;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="child"></div>
    </div>
</body>