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

Question

我正在尝试将任意宽度的图像水平居中。（换句话说，每张图片的宽度都在 100 像素到 1000 像素之间）。父区域为 712px 宽。

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

Answer 1

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

或：

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

Answer 2

.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;
}

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

Answer 3

你可以这样做： https://jsfiddle.net/46mdr2z6/1/

    <div class="wrapper">
  <div>
    <img src="http://placehold.it/250x110">
  </div>
  <div>
    <img src="http://placehold.it/150x150">
  </div>
  <div>
    <img src="http://placehold.it/650x250">
  </div>
  <div>
    <img src="http://placehold.it/850x350">
  </div>
  <div>
    <img src="http://placehold.it/120x750">
  </div>
  <div>
    <img src="http://placehold.it/520x270">
  </div>
</div>

css:

.wrapper {
  width: 712px
}
.wrapper > div{
  text-align: center;
}
img {
  max-width: 100%;
}

Answer 4

此 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 5

看看这个：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这显然是我的一些开发朋友一直在采用的东西。我可能会开始试一试。它仍然是 CSS，很干净，不需要脚本。您也可以垂直居中（以及其他内容）。

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

Horizontally Centering image of any width with CSS

css

centering

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

Horizontally Centering image of *any* width with CSS

css

centering

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

Horizontally Centering image of any width with CSS