将较大的元素居中于较小的容器元素中

Question

如何使图像居中而不遮盖下面的段落？position: absolute;或float: left;两者都会引起问题。

<p>This is the first paragraph</p>
<p><img src="http://placekitten.com/600/280"/></p>
<p>Paragraph 3</p>

假设以下CSS：

p { width: 100px; margin: 0 auto}

我还想确保较大的img元素不是overflow:hidden由父p标记引起的。我想查看完整的图像，即使它太大也是如此。

示例jsfiddle。

Answer 1

如果需要保留固定宽度的段落，则可以使用以下内容使图像居中：

img {
    -webkit-transform:translateX(-50%);
       -moz-transform:translateX(-50%);
        -ms-transform:translateX(-50%);
         -o-transform:translateX(-50%);
            transform:translateX(-50%);
    margin-left:50%;
}