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

第三种：利用flexbox布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .div {
                width: 200px;
                height: 200px;
                border: 1px solid #000000;
                display: flex;
                /*!*flex-direction: column;*!可写可不写*/
                justify-content: center;
                align-items: center;
            }
             
            img {
                width: 100px;
                height: 100px;
                display: block;
                margin: auto;
            }
        </style>
    </head>
 
    <body>
 
        <div class="div">
            <img src="img/1.jpg" />
        </div>
    </body>
 
</html>

效果：

第四种：利用transform的属性（缺点：需要支持Html5）

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .div {
                width: 200px;
                height: 200px;
                border: 1px solid #000000;
                position: relative;
            }
             
            img {
                width: 100px;
                height: 100px;
                position: absolute;
                top: 50%;
                left: 50%;
                -ms-transform: translate(-50%, -50%);
                -moz-transform: translate(-50%, -50%);
                -o-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
 
    <body>
 
        <div class="div">
            <img src="img/1.jpg" />
        </div>
    </body>
 
</html>