CSS3图片水平居中常用方法

外层假定高度一定

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">绝对定位+Marginh3>
<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


<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">绝对定位+Marginh3>
    <div class="container container-1">
        <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
    div>
    <h3 class="demo">Flexboxh3>
    <div class="container container-2">
        <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
    div>
    <h3 class="demo">TableCellh3>
    <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>

你可能感兴趣的:(前端)