css 实用技巧 —— div在div中水平垂直居中（两种方法）

朝阳39

已于 2025-02-17 14:30:20 修改

阅读量1.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：已整合文章标签： css

于 2021-03-23 21:15:52 首次发布

本文链接：https://blog.csdn.net/weixin_41192489/article/details/115144302

已整合专栏收录该内容

10 篇文章

订阅专栏

本文介绍了两种CSS布局方法实现元素的垂直和水平居中。方法一是利用子绝父相定位，通过设置绝对定位和margin自动分配空间来达到居中效果；方法二是借助display:table-cell属性，结合vertical-align:middle和margin:0 auto实现居中对齐。这两种方法在网页布局中非常实用。

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

已整合至 CSS【详解】居中对齐（水平居中、垂直居中、水平垂直居中）_css居中对齐-CSDN博客

方法一：子绝父相

<template>
    <div class="father">
        <div class="son">
        </div>
    </div>
</template>
<style scoped>
    .father {
        background: red;
        height: 200px;
        position: relative;
    }

    .son {
        background: green;
        width: 80%;
        height: 100px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }
</style>

实现原理

1. 使用子绝父相定位

2. 默认情况下，绝对定位元素的宽度表现是“包裹性”，宽度由内部尺寸决定，但对于非替换元素，当left/right或top/bottom对立方位的属性值同时存在时，元素的宽度表现为“格式化宽度/高度” ，margin、border、padding和content内容区域会自动分配水平（和垂直）空间。

方法二：display: table-cell

<template>
    <div class="father">
        <div class="son">
        </div>
    </div>
</template>
<style scoped>
    .father {
        background: red;
        height: 200px;
        width: 200px;
        display: table-cell;
        vertical-align: middle;
    }

    .son {
        background: green;
        width: 80%;
        height: 100px;
        margin: 0 auto;
    }
</style>