82

我想在没有 javascript和没有 background-images的 div 中居中 img 。

这是一些示例代码

<div> 
    <img src="/happy_cat.png"/> 
</div>
  • 我不知道img的大小，它应该能够超过父级的宽度
  • 我不知道父 div 的宽度（它是 100%）
  • 父 div 具有固定高度
  • 图像大于父级且父级有溢出：隐藏
  • 只需要支持现代浏览器

期望的结果。（忽略不透明度等，只注意定位）。

在此处输入图像描述

我知道这可以通过背景图像轻松完成，但这对我来说不是一个选择。我也可以使用 javascript，但这似乎是一种非常笨拙的方法来实现这一点。

谢谢！

杰克

4

6 回答 6

106

那这个呢：

.img {
   position: absolute;
   left: 50%;
   top: 50%;
   -webkit-transform: translateY(-50%) translateX(-50%);
}

这假设父 div 是相对定位的。如果您希望 .img 相对定位而不是绝对定位，我认为这很有效。只需删除position: absoluteand 将 top/left 更改为margin-topand margin-left。

您可能希望使用 等添加浏览器transform支持-moz-transform。

于 2013-11-02T16:56:45.890 回答
58

老问题，新答案：

当图像大于包装 div 时， text-align:center 或 margin:auto 将不起作用。但是如果图像更小，那么绝对定位或负左边距的解决方案会产生奇怪的效果。

因此，当图像大小实际上事先不知道（例如在 CSM 上）并且它可能大于或小于包装 div 时，有一个优雅的 CSS3 解决方案可以满足所有目的：

div {
    display: flex;
    justify-content: center;
    height: 400px; /* or other desired height */
    overflow: hidden;
}
img {
    flex: none; /* keep aspect ratio */
}

请注意，根据样式表中的其他规则，您可能需要将 width:auto 和/或 max-width:none 附加到 img。

于 2015-10-14T20:11:48.363 回答
2

这总是有点棘手，并且有很多解决方案。我发现最好的解决方案如下。这将其垂直和水平居中。

CSS

#container {
    height: 400px;
    width: 400px;
}
.image {
    background: white;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.left {
    width: 100px;
    height: 100%;
    z-index: 2;
    background: white;
    top: 0px;
    position: absolute;
    left: 0px;
}
.right {
    width: 100px;
    height: 100%;
    z-index: 2;
    position: absolute;
    background: white;
    top: 0px;
    right: 0px;
}
.image img {
    margin: auto;
    display: block;
}

HTML 

    <div id="container">
<div class="image">
    <div class="left"></div>
    <div class="right"></div>
    <img width="500" src="https://www.google.com.au/images/srpr/logo11w.png" />
</div>

见小提琴

略有不同的技术：小提琴

于 2013-10-30T04:43:29.707 回答
2

我知道这很旧，但我也想出了一个与上面非常相似的纯 css 解决方案。

.parent {
    float: left;
    position: relative;
    width: 14.529%; // Adjust to your needs
}

.parent img {
    margin: auto;
    max-width: none; // this was needed for my particular instance
    position: absolute;
    top: 11px; right: -50%; bottom: 0; left: -50%;
    z-index: 0;
}
于 2014-08-24T16:51:04.087 回答
2

感谢大家的帮助。我将认为这仅在 CSS 中是无法实现的。

我将转向 jQuery 解决方案。这是一些感兴趣的人的[伪]代码。

我打算放弃 CSS 解决方案，但看起来可以做到（见接受的答案）。这是我要使用的 JS 解决方案。

var $img = $('img'),
    w = $img.width();

$img.css({marginLeft: -w});

以及随附的 css

img{
  position:absolute;
  left:50%;
}
于 2013-10-30T22:56:40.803 回答
1

只需按如下方式初始化图像的位置。

HTML：

<div> 
    <img id="img" src="/happy_cat.png"/> 
</div>

CSS：

#img {
    left: 0;
    right: 0;
}

或者看一个margin: auto;

这是用于水平对齐。要垂直对齐它，您可以display: table-cell;对您<div>的 an then执行 a ，vertical-align: middle;但这不是一个好习惯，因为您<div>不是表格。

于 2013-10-30T07:57:57.197 回答