简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
html5 - h5页面不规则尺寸图片垂直居中
ringa_lee
ringa_lee 2017-04-17 11:46:01
0
15
1211

问题描述：
想要在chrome 模拟手机上让不规则尺寸图片垂直水平居中。
边框适应屏幕设置成正方形。
现在只能做到水平居中。
达达们有什么好的建议和意见？

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<title></title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta content="telephone=no" name="format-detection" />
  <meta name="apple-touch-fullscreen" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />

  <style>
      body{
          margin: 0;
          padding:0;
      }
    ul{
        list-style-type:none;
        width : 100%;
        margin: 0;
        padding:0;
        background: red;

    }
      li{
          position:relative;
          width:44%;
          padding-bottom: 44%;
          margin-left: 4%;
          float:left;
          margin-bottom:20px;
          background:black;
          border: 1px solid black;
      }
      .pic-box{
          position: absolute;
          vertical-align: middle;
          text-align: center;
          width: 100%;
          height: 100%;
      }

      li img{
          max-width: 100%;
          max-height: 100%;
      }
  </style>
</head>

<body>
<ul class="recommand">
    <li class="product">
         <p class="pic-box">           
            <img src="http://xqproduct.xiangqu.com/FuWqf3VvGKNcz4KqNmv5u6A2RgOs?imageView2/2/w/200/q/95/format/jpg/@w/$w$@/@h/$h$@/501x501/" alt=""/>
         </p>
        <p class="productTitle"></p>
        <p class="productInfo"></p>
    </li>
    <li class="product">
     <p class="pic-box">
        <img src="http://xqproduct.xiangqu.com/FuWqf3VvGKNcz4KqNmv5u6A2RgOs?imageView2/2/w/200/q/95/format/jpg/@w/$w$@/@h/$h$@/501x501/" alt=""/>
      </p>  
        <p class="productTitle"></p>
        <p class="productInfo"></p>
    </li>
    <li class="product">
     <p class="pic-box">
        <img src="http://xqproduct.xiangqu.com/FnjvPYht33im-3ms3vJX_Zo2RWuK?imageView2/2/w/200/q/95/format/jpg/@w/$w$@/@h/$h$@/800x533/" alt=""/>
          </p>
        <p class="productTitle"></p>
        <p class="productInfo"></p>
    </li>
    <li class="product">
     <p class="pic-box">
        <img src="http://xqproduct.xiangqu.com/FnjvPYht33im-3ms3vJX_Zo2RWuK?imageView2/2/w/200/q/95/format/jpg/@w/$w$@/@h/$h$@/800x533/" alt=""/>
          </p>
        <p class="productInfo"></p>
    </li>
    <li class="product">
     <p class="pic-box">
        <img src="http://xqproduct.xiangqu.com/Fo0oz03Xjbr4te0AY2wyq2q2CGDD?imageView2/2/w/200/q/95/format/jpg/@w/$w$@/@h/$h$@/640x800/" alt=""/>
          </p>
        <p class="productTitle"></p>
        <p class="productInfo"></p>
    </li>
    <li class="product">
     <p class="pic-box">
        <img src="http://xqproduct.xiangqu.com/Fo0oz03Xjbr4te0AY2wyq2q2CGDD?imageView2/2/w/200/q/95/format/jpg/@w/$w$@/@h/$h$@/640x800/" alt=""/>
          </p>
        <p class="productTitle"></p>
        <p class="productInfo"></p>
    </li>
    <li class="product">
     <p class="pic-box">
        <img src="http://xqproduct.xiangqu.com/Fo0oz03Xjbr4te0AY2wyq2q2CGDD?imageView2/2/w/200/q/95/format/jpg/@w/$w$@/@h/$h$@/640x800/" alt=""/>
          </p>
        <p class="productTitle"></p>
        <p class="productInfo"></p>
    </li>
    <li class="product">
     <p class="pic-box">
        <img src="http://xqproduct.xiangqu.com/FnjvPYht33im-3ms3vJX_Zo2RWuK?imageView2/2/w/200/q/95/format/jpg/@w/$w$@/@h/$h$@/800x533/" alt=""/>
          </p>
        <p class="productTitle"></p>
        <p class="productInfo"></p>
    </li>
</ul>
</body>
</html>
ringa_lee
ringa_lee

ringa_lee

reply all(15)
黄舟
黄舟2017-04-17 11:48:01 15 floor

Since you mentioned h5, Flex layout must be recommended first. 

.pic-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

justify-content: center; is used for horizontal centering, and align-items: center; sets vertical centering.

Like +0
Add Reply
左手右手慢动作
左手右手慢动作2017-04-17 11:48:01 14 floor

There are many solutions for vertical centering of unknown height. The most common solution is to consider using an empty label to achieve vertical centering. Due to the high code reuse rate, it is usually encapsulated in a common utils, starting with fn: 

/*
 * 未知高度垂直居中布局
 */
.fn-layout-center{
    font-size: 0;
    *word-spacing: -1px; /* IE6、7 */
    height: 100%; /* 继承父级高度 */
}

/* 修复 Safari 5- inline-block 的空隙 */
 @media (-webkit-min-device-pixel-ratio:0) {
.fn-layout-center{
    letter-spacing: -5px;
    }
}

/* 使用空标签生成一个高度100%的参照元素 */
.fn-layout-center .fn-center-hack {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    font-size: 0;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

.fn-layout-center .fn-center-body {
    letter-spacing: normal;
    word-spacing: normal;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    font-size: 12px;
    vertical-align: middle; /* 保证文字垂直居中 */
    padding: 0 !important; /* 防止设置边距导致居中失效 */
    margin: 0 !important;
    width: 100%; /* 保证连续字符也能居中 */
    white-space: normal; /* 保证连续字符换行 */
    word-wrap: break-word;
}

.fn-layout-center .fn-center-img {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 100%;
    text-align: center; /* 图片默认水平居中 */
    vertical-align: middle;
    padding: 0 !important; /* 防止设置边距导致居中失效 */
    margin: 0 !important;
    font-size:0;
}

.fn-layout-center img {
    vertical-align: middle; /* 去除现代浏览器 img 底部空隙 */
}

You can place the above CSS code anywhere, and then modify your image structure, as follows: 

<li class="product">
    <p class="pic-box fn-layout-center">
        <b class="fn-center-hack"></b>
        <p class="fn-center-body">
          <p class="fn-center-img">          
            <img src="http://xqproduct.xiangqu.com/FuWqf3VvGKNcz4KqNmv5u6A2RgOs?imageView2/2/w/200/q/95/format/jpg/@w/$w$@/@h/$h$@/501x501/" alt=""/>
          </p>
        </p>
    </p>
    <p class="productTitle"></p>
    <p class="productInfo"></p>
</li>

Achieve results

Since I only modified the image structure of the 1st and 3rd li, only these two are effective, please change the others by yourself.

In fact, this solution can also solve the problem of horizontal centering of single-line, multi-line text and mixed graphics and text of unknown content. All usage methods are as follows:

The image is vertically centered

<p class="fn-layout-center" style="height: 300px;">
    <b class="fn-center-hack"></b>
    <p class="fn-center-body">
        <p class="fn-center-img">
            <img src="" width="200" alt="" />
        </p>
    </p>
</p>

Single-line text and multi-line text are vertically centered

<p class="fn-layout-center" style="height: 300px;">
    <b class="fn-center-hack"></b>
    <p class="fn-center-body">
        单行文字与多行文字垂直居中
    </p>
</p>

Mixed graphics and text

<p class="fn-layout-center" style="height: 300px;">
    <b class="fn-center-hack"></b>
    <p class="fn-center-body">
        <img src="" width="200" alt="" />
        <p>这里是对图片的描述</p>
    </p>
</p>
Like +0
Add Reply
大家讲道理
大家讲道理2017-04-17 11:48:01 13 floor 
img{width: 100%;height: 100%;object-fit:contain;}
Like +0
Add Reply
伊谢尔伦
伊谢尔伦2017-04-17 11:48:01 12 floor 
.pic-box{
  position: absolute;
  width: 100%;
  height: 100%;
}
li img{
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
  -ms-transform: translate3d(-50%,-50%,0);
  -moz-transform: translate3d(-50%,-50%,0);
  -webkit-transform: translate3d(-50%,-50%,0);
  -o-transform: translate3d(-50%,-50%,0);
}
Like +0
Add Reply
大家讲道理
大家讲道理2017-04-17 11:48:01 11 floor

Use fle layout

Like +0
Add Reply
左手右手慢动作
左手右手慢动作2017-04-17 11:48:01 10 floor

Since it is h5, of course flexible layout is the first thing you should try. And flex is also very convenient to use.

Like +0
Add Reply
巴扎黑
巴扎黑2017-04-17 11:48:01 9 floor

No one thought of table-cell. . . ? Rendering is more efficient than flex

Like +0
Add Reply
迷茫
迷茫2017-04-17 11:48:01 8 floor

left:50%; transform:translate(-50%, 0)

Like +0
Add Reply
阿神
阿神2017-04-17 11:48:01 7 floor

h5 has a new unit of width height, vw vh, you will understand if you check it

Like +0
Add Reply
刘奇
刘奇2017-04-17 11:48:01 6 floor

Look here Look here
https://css-tricks.com/centering-css-complete-guide/

Complete Guide to English CSS Centering

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！