css盒子中的图如何居中-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

居中方法：1、给盒子设置相对定位、图片设置绝对定位；然后调整图片位置即可。2、将img图片元素设置为块级元素；然后利用table-cell、“vertical-align:middle;”来居中。3、利用flexbox布局来居中。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css让图片在div盒子里居中

第一种：用css的position属性

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .div1 {
                width: 200px;
                height: 200px;
                border: 1px solid #000000;
                position: relative;
            }
             
            img {
                width: 100px;
                height: 100px; 
                position: absolute;
                margin: auto;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
        </style>
    </head>
 
    <body>
 
        <div class="div1">
            <img src="img/1.jpg" />
        </div>
    </body>
 
</html>

效果图：

第二种：利用css3的新增属性table-cell, vertical-align:middle;

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .div {
                width: 200px;
                height: 200px;
                border: 1px solid #000000;
                display: table-cell;
                vertical-align: middle;
            }
             
            img {
                width: 100px;
                height: 100px;
                display: block;
                margin: auto;
            }
        </style>
    </head>
 
    <body>
 
        <div class="div">
            <img src="img/1.jpg" />
        </div>
    </body>
 
</html>