CSS-布局【1】-图片在div中垂直居中

方法一：通过增加100%高度行内块居中对齐

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style type="text/css">
        div{
            width: 600px;
            height: 220px;
            text-align: center;
            border: 1px solid red;
        }

        span{
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }

        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <span></span><img src="demo.jpg">
    </div>
</body>
</html>

 方法二：通过table/table-cell样式居中

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style type="text/css">
        div{
            width: 600px;
            height: 220px;
            text-align: center;
            border: 1px solid red;
            display: table;
        }

        span{
            display: table-cell;     
            vertical-align: middle;       
        }

        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="container">
        <span><img src="demo.jpg"></span>
    </div>
</body>
</html>

方法三：设置为背景图片居中

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style type="text/css">
        div{
            width: 600px;
            height: 220px;
            text-align: center;
            border: 1px solid red;
            background-image: url('demo.jpg');
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

 

posted @ 2016-04-01 12:02  上帝之城  阅读(308)  评论(0)  编辑  收藏  举报