CSS实现DIV垂直水平居中

最新推荐文章于 2026-04-15 11:07:12 发布

原创最新推荐文章于 2026-04-15 11:07:12 发布 · 1.7k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端学习手记

本文介绍了CSS实现div垂直水平居中的三种方法，包括详细代码和实际效果展示，是前端学习的基础内容，适合初学者参考学习。

CSS实现DIV垂直水平居中

在页面设计中，很多地方都需要div的垂直水平居中，在前端开篇的学习中，也是使用较多的地方，所以我整理了三种方法帮助大家去解决问题，代码可直接使用，仅供参考学习。

方法

方法一：

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<div></div>
</body>

方法二：

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px; /*height的一半*/
            margin-left: -50px; /*width的一半*/
        }
    </style>
</head>
<body>
<div></div>
</body>

方法三：

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<div></div>
</body>