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

Question

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

<p class="banner">
    <ul>
        <li>
            <img src="/attached/banner/1.jpg">
        </li>
        <li>
            <img src="/attached/banner/2.jpg">
        </li>
        <li>
            <img src="/attached/banner/3.jpg">
        </li>
    </ul>
</p>

3Q!

Answer 1

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

Answer 2

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

Answer 3

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

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

}

Answer 4

在大屏幕（父容器的宽度大于图片宽度）中，图片居中需要的代码如下: （父容器用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 5

<p>
        <img src="" />
</p>

CSS

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

Answer 6

我也来一个

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