How to center an image?

sanshi_zhang

于 2013-06-24 11:27:13 发布

阅读量572

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/u010918003/article/details/9160107

版权

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了三种在 div 中使图片居中的 CSS 方法，并详细解释了每种方法的具体实现方式。作者认为第三种方法更为优雅准确。

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

I find three ways to center an image in a div:

<style type="text/css">
        .container1
        {
            border: solid 1px #666;
            width: 100px;
            height: 100px;
        }
        .container1 img
        {
            margin: 42px 0px 0px 42px; /* (100-16)/2 = 42 */
        }
        .container3
        {
            border: solid 1px #666;
            width: 100px;
            height: 100px;
            position: relative;
        }
        .container3 img
        {
            position: absolute;
            top: 42px;
            left: 42px; /* (100-16)/2 = 42 */
        }
        .container4
        {
            border: solid 1px #666;
            width: 100px;
            height: 100px;
            position: relative;
        }
        .container4 img
        {
            position: absolute;
            top: 50%;
            margin-top: -8px; /* 16/2 = 8 */
            left: 50%;
            margin-left: -8px;
        }
    </style>
    <div class="container1">
        <img src="mini/clock.gif" mce_src="mini/clock.gif" alt="" />
    </div>
    <br />
    <div class="container3">
        <img src="mini/clock.gif" mce_src="mini/clock.gif" alt="" />
    </div>
    <br />
    <div class="container4">
        <img src="mini/clock.gif" mce_src="mini/clock.gif" alt="" />
    </div>

In my opinion, the third method is graceful and accurate, which i borrow from my last example.