【css】图片垂直水平居中

一、已知宽高的图片实现垂直水平居中

1.借助margin-top负边距实现垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>在已知图片高度的情况下借助margin-top负边距实现垂直居中</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            html,body{
                width:100%;
                height:100%;
            }
            .wrap{
                position:relative;
                width:500px;
                height:500px;
                text-align:center;
                border:1px solid #e64c65;
            }
            img{
                position:absolute;
                top:50%;
                height:88px;
                left:0;
                right:0;
                margin:auto;
                margin-top:-44px;
                
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="girl.jpg"  alt=""/>
        </div>
    </body>
</html>

2.借助额外的块级元素实现垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>在已知图片高度的情况下借助额外的块级元素实现垂直居中</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            html,body{
                width:100%;
                height:100%;
            }
            .wrap{
                width:500px;
                height:500px;
                text-align:center;
                border:1px solid #e64c65;
            }
            .temp{
                height:50%;
                margin-bottom:-44px;
            }
            img{
                height:88px;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="temp"></div>
            <img src="girl.jpg"  alt=""/>
        </div>
    </body>
</html>

二、未知宽高的图片实现垂直水平居中

1.利用line-height 和 vertical-align:middle实现垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>利用line-height 和 vertical-align:middle实现垂直居中</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            html,body{
                width:100%;
                height:100%;
            }
            .wrap{
                width:500px;
                height:500px;
                text-align: center;
                line-height:500px;
                border:1px solid #e64c65;
                margin:100px auto;

            }
            img{
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="girl.jpg"  alt=""/>
        </div>
    </body>
</html>

2.借助高度100%的一个标签，原理vertical-align属性的特性实现垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>借助高度100%的一个标签，原理vertical-align属性的特性实现垂直居中</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            html,body{
                width:100%;
                height:100%;
            }
            .wrap{
                width:500px;
                height:500px;
                text-align: center;
                border:1px solid #e64c65;
            }
            img{
                vertical-align: middle;
            }
            span{
                display: inline-block;
                height:100%;
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="girl.jpg"  alt=""/>
            <span></span>
        </div>
    </body>
</html>

3.利用after伪类实现垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>利用after伪类实现垂直居中</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            html,body{
                width:100%;
                height:100%;
            }
            .wrap{
                width:500px;
                height:500px;
                text-align:center;
                border:1px solid #e64c65;
            }
            .wrap::after{
                display:inline-block;
                content:'';
                height:100%;
                vertical-align: middle;
            }
            img{
                vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="girl.jpg"  alt=""/>
        </div>
    </body>
</html>

4.利用table-cell实现垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>利用table-cell实现垂直居中</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            html,body{
                width:100%;
                height:100%;
            }
            .wrap{
                display:table-cell;
                width:500px;
                height:500px;
                font-size:0;
                vertical-align: middle;
                text-align: center;
                border:1px solid #e64c65;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="girl.jpg"  alt=""/>
        </div>
    </body>
</html>

5.利用flex弹性布局实现垂直居中实现垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>利用flex弹性布局实现垂直居中实现垂直居中</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            html,body{
                width:100%;
                height:100%;
            }
            .wrap{
                width:500px;
                height:500px;
                display: flex;
                justify-content: center;
                align-items: center;
                border:1px solid #e64c65;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="girl.jpg"  alt=""/>
        </div>
    </body>
</html>

6.利用绝对定位实现垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>未知图片高度的情况下借助绝对定位实现垂直居中</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            html,body{
                width:100%;
                height:100%;
            }
            .wrap{
                position:relative;
                width:500px;
                height:500px;
                border:1px solid #e64c65;
            }
            img{
                position:absolute;
                top:0;
;                bottom:0;
                left:0;
                right:0;
                margin:auto;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="girl.jpg"  alt=""/>
        </div>
    </body>
</html>

7.利用绝对定位+transform实现垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>未知图片高度的情况下借助绝对定位+transform实现垂直居中</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            html,body{
                width:100%;
                height:100%;
            }
            .wrap{
                position:relative;
                width:500px;
                height:500px;
                border:1px solid #e64c65;
            }
            img{
                left: 50%;
                top: 50%;
                position: absolute;
                -webkit-transform: translate3D(-50%,-50%,0);
                -ms-transform: translate3D(-50%,-50%,0);
                -moz-transform: translate3D(-50%,-50%,0);
                -o-transform: translate3D(-50%,-50%,0);
                transform: translate3D(-50%,-50%,0);
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <img src="girl.jpg"  alt=""/>
        </div>
    </body>
</html>