css实现垂直居中（面试的时候面试官经常会问的）

最新推荐文章于 2025-06-12 13:49:47 发布

原创最新推荐文章于 2025-06-12 13:49:47 发布 · 774 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css垂直居中

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了六种在网页设计中实现元素居中的方法，包括使用绝对定位加负margin、绝对定位加calc、绝对定位加transform、Flex布局、CSS Table布局及各自的优缺点对比，适用于不同场景和设备。

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

1.absolute + margin auto

<style>
    .wrap {
        position: relative;
        width: 200px;
        height: 200px;
        border: 1px solid blueviolet;
    }
    .children {
        margin:auto;
        bottom: 0;
        right: 0;
        left: 0;
        top: 0;
        position: absolute;
        width: 100px;
        height: 100px;
        background: beige;
    }
</style>
<body>
<div class="wrap">
    <div class="children">子元素</div>
</div>
</body>

2.absolute + 负margin

<style>
    .wrap {
        position: relative;
        width: 200px;
        height: 200px;
        border: 1px solid blueviolet;
    }
    .children {
        margin-left: -50px;
        margin-top: -50px;
        top: 50%;
        left: 50%;
        position: absolute;
        width: 100px;
        height: 100px;
        background: beige;
    }
</style>
<body>
<div class="wrap">
    <div class="children">子元素</div>
</div>
</body>

3.absolute + calc

<style>
    .wrap {
        position: relative;
        width: 200px;
        height: 200px;
        border: 1px solid blueviolet;
    }
    .children {
        top:calc(50% - 50px);
        left:calc(50% - 50px);
        position: absolute;
        width: 100px;
        height: 100px;
        background: beige;
    }
</style>
<body>
<div class="wrap">
    <div class="children">子元素</div>
</div>
</body>

4.absolute + transform

<style>
    .wrap {
        position: relative;
        width: 200px;
        height: 200px;
        border: 1px solid blueviolet;
    }
    .children {
        top:50%;
        left:50%;
        position: absolute;
        transform: translate(-50%,-50%);
        width: 100px;
        height: 100px;
        background: beige;
    }
</style>
<body>
<div class="wrap">
    <div class="children">子元素</div>
</div>
</body>

5.flex

<style>
    .wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        border: 1px solid blueviolet;
    }
    .children {
        width: 100px;
        height: 100px;
        background: beige;
    }
</style>
<body>
<div class="wrap">
    <div class="children">子元素</div>
</div>
</body>

6.css-table

<style>
    .wrap {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        width: 200px;
        height: 200px;
        border: 1px solid blueviolet;
    }
    .children {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: beige;
    }
</style>
<body>
<div class="wrap">
    <div class="children">子元素</div>
</div>
</body>