CSS3实现图片在DIV中上下左右居中（2）

转载于 2017-02-21 10:00:41 发布 · 3.1k 阅读

文章标签：

#css3

前端笔记同时被 2 个专栏收录

165 篇文章

订阅专栏

css

18 篇文章

订阅专栏

本文介绍了一种使用CSS3实现图片在DIV容器内水平垂直居中的方法。通过设置绝对定位与transform属性，使得不论图片尺寸如何都能在容器中精准居中显示。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS3实现图片在DIV中上下左右居中</title>
    <style>
        .box{width:600px;height:600px;border:1px solid red;position: relative;}
        .wrapper {
            padding: 20px;
            background:orange;
            color:#fff;
            position:absolute;
            top:50%;
            left:50%;
            border-radius: 5px;
            -webkit-transform:translate(-50%,-50%);
            -moz-transform:translate(-50%,-50%);
            transform:translate(-50%,-50%);
        }
    </style>
</head>
<body>

<div class="box">
    <div class="wrapper">
        我不知道我的宽度和高是多少，我要实现水平垂直居中
    </div>
</div>

</body>
</html>