html5 - h5页面不规则尺寸图片垂直居中

Question

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

黄舟 · Answer

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.

ringa_lee · Answer

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:

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

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


    
    

        单行文字与多行文字垂直居中

Mixed graphics and text


    
    

        
        
这里是对图片的描述

大家讲道理 · Answer

img{width: 100%;height: 100%;object-fit:contain;}

伊谢尔伦 · Answer

.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);
}

大家讲道理 · Answer

Use fle layout

ringa_lee · Answer

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

巴扎黑 · Answer

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

迷茫 · Answer

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

阿神 · Answer

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

怪我咯 · Answer

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

Complete Guide to English CSS Centering