父div宽度100%，图片怎么居中?

Question

现在宽屏设计常见，为了适应不同的显示器，往往给div一个100%的宽度，下面再写，那么问题来了，这样的图片怎样做到在任何窗口宽度时自动居中显示?

<div class="banner">
    <ul>
        <li>
            <img referrerpolicy="no-referrer" src="/attached/banner/1.jpg">
        </li>
        <li>
            <img src="/attached/banner/2.jpg">
        </li>
        <li>
            <img src="/attached/banner/3.jpg">
        </li>
    </ul>
</div>

3Q!

Answer 1

是垂直并且水平居中把，解决方案需要css + js

简单css的水平垂直居中

还记得当年的固定大小的任意元素垂直居中于父元素吗？

<div id="father">
  <div id="son"></div>
</div>

#father{
    width:100%;
    height:100%;
    position:relative;//父相对
}

#son{
    width:400px;
    height:200px;

    position:absolute;
    top:50%;
    left:50%;

    /*关键:让点回去*/
    margin-left: -200px;
    margin-top: -100px;
}

复杂的但是原理一样

这里如果son的宽高不固定怎么办？不知道这是不是题主要问的。

css的代码需要去掉margin，然后使用js获取。

<div id="father">
  <div id="son"></div>
</div>

#father{
    width:100%;
    height:100%;
    position:relative;//父相对
}

#son{
    width:400px;
    height:200px;

    position:absolute;
    top:50%;
    left:50%;

    /*去掉这里，使用js获取
    margin-left: -200px;
    margin-top: -100px;

    */
}

js代码

$(function(){
var height = $("#son").width();
var height = $("#son").height();

$("#son").attr("margin-top",(-height/2)+"px");
$("#son").attr("margin-left",(-width/2)+"px");
});

特别提醒

如果你的son是一个image，您需要延迟执行上面的代码，因为获取到的图片长宽需要等待图片下载完成后再来计算

代码如下

<div id="father">
  <img id="son" src="http://XXXX.jpg" />
</div>

css代码不变，js代码如下

$(function(){
  $("#son").on("load",function(){

    /*这里的图片获取长宽不再是这个样子的，需要修改*/
    //var height = $("#son").width();
    //var height = $("#son").height();


    /*请自己查找把。*/
    $("#son").attr("margin-top",(-height/2)+"px");
    $("#son").attr("margin-left",(-width/2)+"px");


    })
});

提示

如果是图片。请自行查找如何获取图片的原始大小

Answer 2

方法1， img中设置样式 <img src="xxx" style="display: block; margin: 0px auto; vertical-align: middle;">
方法2， div中设置样式 <div style="text-align:center;">
... 其实有很多种方法

Answer 3

补充一点 不需要给元素设置宽度100% 默认块级元素就是100%的

Answer 4

去看看张鑫旭大神博客，有各种居中。w3cplus上也有各种居中文章。

Answer 5

div 用 text-align:center;
然后img用 margin:0 auto;注意的是后面那个auto，前面那个0自定义

Answer 6

绝对定位left:50%
然后再用margin-left图片宽度的一半

Answer 7

为什么一定是图片，而不是作为背景图片呢，作为背景图片的话，background-position:center;就解决了啊……

如果你是要做很多动画效果的话，那就再议了，或许也可以用背景图片的方式，就是看其他动画的元素怎么去定义位置了。

Answer 8

<div>
    <img src="" />
</div>

CSS

div{
    position:relative;
    width:100%;
}
div img{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    max-width:100%;
}

或许你可以试试这样子写

Answer 9

给div加上text-align:center 不是就可以居中了吗

Answer 10

盒模型 so easy

Answer 11

w3cplus的文章：[居中之美]（http://www.w3cplus.com/collective-5.html）

Answer 12

可以设置图片object-position: contain~~

Answer 13

table-cell可以搞定。
li{list-style: none}
li{

    display: table-cell;
    width: 100%;
    border: 1px solid red;
    text-align: center;
    vertical-align: middle;

}

Answer 14

在大屏幕（父容器的宽度大于图片宽度）中，图片居中需要的代码如下: （父容器用li代替）

cssli {
    text-align: center;
}
img {
    margin: 0 auto;
}

以下针对父容器不够宽时，只写添加的代码

1. 缩放图片，但保持图片的高宽比

cssimg {
    max-width: 100%;
}

1. 不缩放图片，而是对图片进行裁剪，裁剪保留区域为图片中部，以下只写了水平方向，垂直方向同理

cssli {
    margin-left: 50%;
    overflow: hidden;
}
img {
    margin-left: -1/2 * width; /* 图片本身尺寸的一半 */
}

注：如果是这种情况，建议将图片作为背景，然后利用背景的裁剪方式比较好。

以上，如果都不是楼主想要的，请再把你的问题描述清楚些。另外，如果只是要水平垂直居中的话，添加的代码如下

cssli {
    font-size: 0;
}
li * {
    font-size: 1rem; /* 这个你用px也可以，但是不能使用em或是百分比 */
}
li::before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0;
}
img {
    vertical-align: middle;
    display: inline-block;
}

无需使用脚本，对宽度未知的img也适用。

Answer 15

<div>
        <img src="" />
</div>

CSS

div{
    position:relative;
    width:100%;
}
div img{
    position:absolute;
    right:0;
    left:0;
    margin:auto;
}

Answer 16

我也来一个

 .juzhong{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
     }