元素垂直水平居中的几种方法

最新推荐文章于 2025-08-11 22:07:06 发布

L凯

最新推荐文章于 2025-08-11 22:07:06 发布

阅读量235

点赞数

CC 4.0 BY-SA版权

分类专栏： css html 文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/weixin_37697277/article/details/79725536

css 同时被 2 个专栏收录

2 篇文章

订阅专栏

html

2 篇文章

订阅专栏

本文介绍了四种不同的方法来实现一个元素在其父容器内的水平垂直居中。这些方法包括使用Flexbox、Position结合Margin、Position结合Transform以及Table-cell等布局技巧。

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

第一种方法：flex

<style>
        .wrap{
            width: 400px;
            height: 400px;
            background:rgba(0,0,0,.2);

            display: flex;
            justify-content:center;
            align-items:center;

        }
        .box{
            width: 200px;
            height: 200px;
            background:rgba(0,0,0,.5);


        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="box"></div>
</div>
</body>

第二种：position,margin

<style>
        .wrap{
            width: 400px;
            height: 400px;
            background:rgba(0,0,0,.2);

            position: relative;

        }
        .box{
            width: 200px;
            height: 200px;
            background:rgba(0,0,0,.5);

            position:absolute;
            left:0;
            top:0;
            right:0;
            bottom:0;

            margin:auto;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="box"></div>
</div>
</body>

第三种：position，transform

<style>
        .wrap{
            width: 400px;
            height: 400px;
            background:rgba(0,0,0,.2);

            position: relative;

        }
        .box{
            width: 200px;
            height: 200px;
            background:rgba(0,0,0,.5);

            position:absolute;
            left:50%;
            top:50%;

            transform:translate(-50%,-50%);
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="box"></div>
</div>
</body>

第四种：table-cell

<style>
        .wrap{
            width: 400px;
            height: 400px;
            background:rgba(0,0,0,.2);

            text-align: center;
            display: table-cell;
            vertical-align: middle;

        }
        .box{
            width: 200px;
            height: 200px;
            background:rgba(0,0,0,.5);

            display:inline-block;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="box"></div>
</div>
</body>