CSS3图片水平居中常用方法

最新推荐文章于 2021-08-03 21:09:52 发布

SupermanYZ

最新推荐文章于 2021-08-03 21:09:52 发布

阅读量3.1k

点赞数 1

分类专栏：前端文章标签： CSS3 图片水平居中

本文链接：https://blog.csdn.net/yangzhengqqq/article/details/77948060

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

外层假定高度一定

h3 {text-align: center;}

.container {width: 300px; height: 300px; margin: 20px auto; background: #00f;}

img {width: 200px; height: 200px;}

方式一：绝对定位+Margin

图片相对外层浮动，然后margin: auto

<h3 class="demo">绝对定位+Margin</h3>
<div class="container container-1">
    <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
</div>

.container-1 {position: relative;}

.container-1 img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}

方式二：Flexbox

采用的是 align-items:center(垂直居中)和justify-content:center(水平居中)这2个属性

<div class="container container-2">
    <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
</div>

.container-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex-box;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    text-align: center;
}

方式三：Tablecell

利用display:table-cell以及图片vertical-align:middle

<div class="container container-3">
    <span class="icenter">
        <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
    </span>
</div>

.container-3 .icenter{display: table-cell; vertical-align: middle; text-align: center; height: 300px; width: 300px;}

.container-3 img{vertical-align: middle; display: inline-block;}

最后附上demo

<!DOCTYPE html>
<html>
<head>
    <title>图片垂直居中</title>
    <style type="text/css">
        h3 {text-align: center;}
        .container {width: 300px; height: 300px; margin: 20px auto; background: #00f;}
        img {width: 200px; height: 200px;}

        .container-1 {position: relative;}
        .container-1 img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}

        .container-2 {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex-box;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack:center;
            -ms-flex-pack:center;
            justify-content:center;
            text-align: center;
        }

        .container-3 .icenter{display: table-cell; vertical-align: middle; text-align: center; height: 300px; width: 300px;}
        .container-3 img{vertical-align: middle; display: inline-block;}
    </style>
<body>
    <h3 class="demo">绝对定位+Margin</h3>
    <div class="container container-1">
        <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
    </div>
    <h3 class="demo">Flexbox</h3>
    <div class="container container-2">
        <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
    </div>
    <h3 class="demo">TableCell</h3>
    <div class="container container-3">
        <span class="icenter">
            <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
        </span>
    </div>
</body>
</html>