使用CSS水平居中*任意*宽度的图像

Question

我正在尝试水平居中任何宽度的图像。 （换句话说，每个图像的宽度落在100px和1000px之间的范围内）。父区域宽712像素。

我尝试过的大多数解决方案都将图像左侧居中50％标记。

Answer 1

此margin-left:50%; transform:translate(-50%,0);会将元素放置在其容器的中间。甚至容器都小于图像：

div { width:100%; overflow-x:hidden; border:1px solid }

div > img { margin-left:50%; transform:translate(-50%,0); vertical-align:middle; }

<div>
  <img src="http://lorempixel.com/400/200/">
</div>

<div>
  <img src="http://lorempixel.com/1000/600/sports/3/">
</div>

Answer 2

img {
    display: block;
    margin: 0 auto;
}

或：

div.your-block-wrapper {
    text-align: center;
}
div.your-block-wrapper img {
    display: block;
}

Answer 3

＆＃13;

＆＃13;

.ct {
    position: relative;
	width: 700px;
	height: 700px;
	margin: 0 auto;
	overflow: hidden;
}
.ct img {
	position: absolute;
	left: 50%;
	width: 900px;
	margin-left: -450px;
	z-index: 22;
}

＆＃13;

<div class="ct">
    <img src="http://images.entertainment.ie/images_content/rectangle/620x372/success-kid.jpg" alt="" />
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

谢天谢地，问题在于我自己的愚蠢。每个图片都有<div>中包含的标题，标题宽度默认设置为400px。调整适合图像的宽度时，图像会对齐。

我的坏。

感谢您的帮助。