Question

我在一个响应式网站上工作，我希望水平居中比父DIV更宽的图像。图像与其父图像具有相同的高度。图像的宽度与高度成比例，因此可以正确渲染。我无法将图像作为背景图像。

如何水平居中图像？即使使用jQuery也最好使用CSS。

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

.div {
    height: 220px;
    margin: 0;
    position: relative;
    width: 100%;
}

.div img {
    display: block;
    height: inherit;
    margin: auto;
    max-width: none;
    width: initial;
}

Answer 1

中心图像的简单方法是使用位置绝对和负的translateX的组合：

.div img {
    display: block;
    height: inherit;
    margin: auto;
    max-width: none;
    width: initial;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

演示： http://jsfiddle.net/fa000nkw/

Answer 2

查看这些弹性框属性是否有帮助......

 justify-content: center;

 align-items: center;

也可以用display：flex;或显示：inline-flex;如果需要的话。

Yup，就像魅力......

.div {
   background: #AAA;
   height: 220px;
   position: absolute;
   width: 100%;
   overflow: hidden;
   justify-content: center;
   align-items: center;
   display:flex;
}
.div img {
  display:flex;
  height: 100%;
  position: relative;
  width: initial;
  justify-content: center;
  align-items: center;
}

水平对齐比其父DIV大的图像

2 个答案: