手记

(推介)居中的7种方法

方法1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.center{
            text-align: center;
            background: hsl(0,100%,97%);
        }
        div.center img{
            width: 33%;
            height: auto;
        }
    </style>
</head>
<body>
<div class="center">
    <img src="img.png">
</div>
</body>
</html>

方法2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div.center{
            background: hsl(60,100%,97%);
        }
        div.center img{
            display: block;
            width: 33%;
            height: auto;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="center">
    <img src="img.png">
</div>
</body>
</html>

方法3:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>
       .center-aligned{
           display: table;
           background: hsl(120,100%,97%);
           width: 100%;
       }
       .center-core{
           display: table-cell;
           text-align: center;
           vertical-align: middle;
       }
       .center-core img{
           width: 33%;
           height: auto;
       }

   </style>
</head>
<body>
<div class="center-aligned">
    <div class="center-core">
        <img src="img.png">
    </div>
</div>
</body>
</html>

方法4:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .absolute-aligned{
            position: relative;
            min-height: 500px;
            background: hsl(200,100%,97%);
        }
        .absolute-aligned img{
            width: 50%;
            min-width: 200px;
            height: auto;
            overflow: auto;
            margin: auto;
            position: absolute;
            top:0;
            left: 0;
            bottom: 0;
            right: 0;
        }
    </style>
</head>
<body>
<!--水平垂直居中-->
<div class="absolute-aligned">
    <img src="img.png">
</div>
</body>
</html>

方法5:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .center{
            background: hsl(180,100%,97%);
            position: relative;
            min-height: 500px;
        }
        .center img{
            position: absolute;
            top:50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 30%;
            height: auto;
        }
    </style>
</head>
<body>
<!--水平垂直居中-->
<div class="center">
    <img src="img.png">
</div>
</body>
</html>

方法6:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .center{
            background: hsl(240,100%,97%);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .center img{
            width: 30%;
            height: auto;
        }
    </style>
</head>
<body>
<!--水平居中-->
<div class="center">
    <img src="img.png">
</div>
</body>
</html>

方法7:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .center{
            background: hsl(300,100%,97%);
            min-height: 600px;
            position: relative;
        }
        .center img{
            width: 40%;
            height: auto;
            position: absolute;
            top:calc(50% - 20%);
            left: calc(50% - 20%);
        }
    </style>
</head>
<body>
<!--水平居中-->
<div class="center">
    <img src="img.png">
</div>
</body>
</html>
1人推荐
随时随地看视频
慕课网APP