CSS3中解决页面图片水平垂直居中问题的方法

| 2018-02-05 09:34:19

做为一个前端设计人员,对于产品展示页面的设计一定不会陌生,其中产品图片摆放是必定经历的一步,并且水平居中和垂直居中又是最多的。


收集了一些解决方法,供大家学习!


1.利用display:table-cell,具体代码如下:


html代码如下:


<div class="img_wrap">

  <img src="wgs.jpg">

</div>


css代码如下:


 .img_wrap{

     width: 400px;

     height: 300px;

     border: 1px dashed #ccc;

     display: table-cell; //主要是这个属性

     vertical-align: middle;

     text-align: center;


2、css图片水平居中


利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下:


<div style="text-align: center; width: 500px; border: green solid 1px;">

<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="margin: 0 auto;" />

</div>


3、css图片垂直居中


利用高==行高实现图片垂直居中

这种方法是要知道高度才可以使用,代码如下:


<div style="text-align: center; width: 500px;height:200px; line-height:200px; border: green solid 1px;">

   <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block; vertical-align: middle;" />

</div>


4、采用背景法:


html代码如下:


<div class="img_wrap"></div>


css代码如下:


.img_wrap{

    width: 400px;

    height: 300px;

    border: 1px dashed #ccc;

    background: url(wgs.jpg) no-repeat center center;

}


5、利用绝对定位实现图片垂直居中


如果已知图片的宽度和高度可以这样,代码如下:


<div style="width: 500px;height:200px; position: relative; border: green solid 1px;">

<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />

</div>


6、移动端可以利用flex布局实现css图片垂直居中


移动端一般浏览器版本都比较高,所以可以大胆的使用flex布局,(flex布局参考css3的flex布局用法)演示代码如下:


css代码:


<style type="text/css">

/*web前端开发http://www.51xuediannao.com/*/

        .ui-flex {

            display: -webkit-box !important;

            display: -webkit-flex !important;

            display: -ms-flexbox !important;

            display: flex !important;

            -webkit-flex-wrap: wrap;

            -ms-flex-wrap: wrap;

            flex-wrap: wrap

        }


        .ui-flex, .ui-flex *, .ui-flex :after, .ui-flex :before {

            box-sizing: border-box

        }


        .ui-flex.justify-center {

            -webkit-box-pack: center;

            -webkit-justify-content: center;

            -ms-flex-pack: center;

            justify-content: center

        }

        .ui-flex.center {

            -webkit-box-pack: center;

            -webkit-justify-content: center;

            -ms-flex-pack: center;

            justify-content: center;

            -webkit-box-align: center;

            -webkit-align-items: center;

            -ms-flex-align: center;

            align-items: center

        }

    </style>


html代码:


<div class="ui-flex justify-center center" style="border: green solid 1px; width: 500px; height: 200px;">

    <div class="cell">

<img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="" />

    </div>

</div>


文 / 网盛    阅:180

免费获取网站建设与品牌策划方案报价

在线预约享受建站8

  • 公司名称
  • 手机号码
  • 网站类型
  • 所在城市
  • 联系人
  • 需求

在线
客服

在线客服服务时间:9:00-17:00

客服
热线

0571-88228136
- 024-83959235
建站服务热线

关注
微信

关注官方微信
顶部
在线客服