DIV里面的图片水平垂直居中

风之_诉

于 2018-05-28 09:47:07 发布

阅读量283

点赞数

分类专栏： HTML+CSS 文章标签： DIV IMG 图片居中

本文链接：https://blog.youkuaiyun.com/luming666/article/details/80475725

版权

HTML+CSS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了两种在网页中实现图片水平垂直居中的方法。方法一使用table-cell布局，通过vertical-align和text-align属性轻松实现居中效果。方法二采用绝对定位，通过top和left属性配合负边距来精确控制图片位置。

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

方法一：

    div{
        width:150px;
        height: 100px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
    }

方法二：

    div{
        width:150px;
        height: 100px;
        position: relative;
        border:1px solid #000;
    }
    img {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -25px; /* 高度的一半 */
        margin-left: -25px; /* 宽度的一半 */
    }