【css】圖片垂直水平居中

時間 2019-12-14

標籤 css 圖片垂直水平居中欄目 CSS 简体版

原文原文鏈接

1、已知寬高的圖片實現垂直水平居中css

1.藉助margin-top負邊距實現垂直居中html

<!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.藉助額外的塊級元素實現垂直居中web

<!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>

2、未知寬高的圖片實現垂直水平居中佈局

1.利用line-height 和 vertical-align:middle實現垂直居中flex

<!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屬性的特性實現垂直居中spa

<!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僞類實現垂直居中code

<!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實現垂直居中orm

<!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彈性佈局實現垂直居中實現垂直居中htm

<!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.利用絕對定位實現垂直居中blog

<!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>