在 div 内水平居中图像

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

这是我的解决方案：http://jsfiddle.net/marvo/3k3CC/2/

---

CSS flexbox 可以通过图像父元素上的 justify-content: center 来实现。要保留图像的纵横比，请将 align-self: flex-start; 添加到其中。

HTML

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

CSS

.image-container {
  display: flex;
  justify-content: center;
}

输出：

身体{背景：浅灰色； } .image-container { 宽度：200px;显示：弯曲；证明内容：中心；边距：10px；填充：10px； /* 材料设计属性 */ background: #fff;盒子阴影：0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .image-2 { 宽度：500px;对齐自我：弹性开始； /* 保留图像纵横比 */ } .image-3 { width: 300px;对齐自我：弹性开始； /* 保留图像纵横比 */ }

---

我刚刚在 W3 CSS 页面上找到了这个解决方案，它回答了我的问题。

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

来源：http://www.w3.org/Style/Examples/007/center.en.html

---

这也可以

#imagewrapper {
    text-align:center;
}

#imagewrapper img {
    display:inline-block;
    margin:0 5px;
}

---

我发现（似乎适用于所有浏览器）水平居中图像或任何元素的最佳方法是创建一个 CSS 类并包含以下参数：

CSS

.center {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}

然后，您可以将您创建的 CSS 类应用到您的标签，如下所示：

HTML

<img class="center" src="image.jpg" />

您还可以通过执行以下操作在元素中内联 CSS：

<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />

...但我不建议内联编写 CSS，因为如果您想更改样式，则必须使用居中的 CSS 代码对所有标签进行多次更改。

---

这就是我最终做的事情：

<div style="height: 600px">
   <img src="assets/zzzzz.png" alt="Error" style="max-width: 100%; 
        max-height: 100%; display:block; margin:auto;" />
</div>

这会将图像高度限制为 600 像素，并将水平居中（如果父宽度较小，则调整大小）到父容器，保持比例。

---

我要四处走动，说以下就是你所追求的。

请注意，我认为在问题中意外省略了以下内容（见评论）：

<div id="thumbnailwrapper"> <!-- <<< This opening element -->
    <div id="artiststhumbnail">
...

所以你需要的是：

#artiststhumbnail {
    width:120px;
    height:108px;
    margin: 0 auto; /* <<< This line here. */
    ...
}

http://jsfiddle.net/userdude/XStjX/3/

---

将此添加到您的 CSS 中：

#artiststhumbnail a img {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

只是引用一个子元素，在这种情况下是图像。

---

是的，像这样的代码工作正常

<div>
 <img/>
</div>

但只是为了提醒你，图像的风格

object-fit : *depend on u*

所以最终的代码就像示例

div {显示：弹性；证明内容：中心；对齐项目：居中； } div img { object-fit: 包含； }

https://i.stack.imgur.com/yUQDJ.png

---

要水平居中图像，可以这样：

<p style="text-align:center"><img src=""></p>

---

使图像居中的响应方式可以是这样的：

.center {
    display: block;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}

---

将图片放在 newDiv 中。使包含 div 的宽度与图像相同。将 margin: 0 auto; 应用于 newDiv。这应该使 div 在容器内居中。

---

使用定位。以下对我有用......（水平和垂直居中）

缩放到图像的中心（图像填充 div）：

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

没有缩放到图像的中心（图像不填充 div）：

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }

---

在 div 中将图像居中

/* 标准 */ div, .flexbox-div { position: relative;宽度：100%；高度：100px；边距：10px；背景颜色：灰色； } img { 边框：3px 纯红色；宽度：75px；高度：75px； } /* ||标准 */ /* 变换 */ .transform { position: absolute;最高：50%；左：50%；变换：翻译（-50%，-50%）； -ms-transform: 翻译(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome、Safari、Opera */ } /* || transform */ /* flexbox 边距 */ .flexbox-div { display: -webkit-flex;显示：弯曲；背景颜色：浅灰色； } .margin-img { 边距：自动； } /* || flexbox margin */ /* flexbox justify align */ .flexbox-justify { justify-content: center; } .align-item { 对齐自我：中心； } /* || flexbox justify align */

使用变换

使用弹性框边距

使用 flexbox justify align

---

我尝试了几种方法。但这种方式对我来说非常有效

<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />

---

为左右设置相等的像素填充：

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">

---

您可以使用最少代码的弹性框对齐您的内容

HTML

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

CSS

.image-container{
  width:100%;
  background:green;
  display:flex;

.image-container{ 宽度：100%;背景：绿色；显示：弹性；证明内容：中心；对齐项目：中心； }

js小提琴链接https://jsfiddle.net/7un6ku2m/

---

如果您必须内联执行此操作（例如在使用输入框时），
这里有一个对我有用的快速技巧：将您的（在这种情况下为图片链接）
用 {2 }

<div style="text-align:center">

<a title="Example Image: Google Logo" href="https://www.google.com/" 
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>

<h6><strong>This text will also be centered </strong></h6>

</div> /* ends centering style */

---

.document { 对齐项目：中心；背景色：hsl(229, 57%, 11%);边框半径：5px；显示：弯曲；高度：40px；宽度：40px； } .document img { 显示：块；边距：自动； }

---

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">


      <style>
      body{
  /*-------------------important for fluid images---\/--*/
  overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
  overflow-y: scroll;
  margin-left:0px;
  margin-top:0px;
  /*-------------------important for fluid images---/\--*/
      }
      .thirddiv{
      float:left;
      width:100vw;
      height:100vh;
      margin:0px;
      background:olive;
      }
      .thirdclassclassone{
      float:left;   /*important*/
      background:grey;
      width:80vw;
      height:80vh; /*match with img height bellow*/
      margin-left:10vw; /* 100vw minus "width"/2    */
      margin-right:10vw; /* 100vw minus "width"/2   */
      margin-top:10vh;
      }
      .thirdclassclassone img{
      position:relative; /*important*/
     display: block;  /*important*/
    margin-left: auto;  /*very important*/
    margin-right: auto;  /*very important*/
    height:80vh; /*match with parent div above*/

    /*--------------------------------
    margin-top:5vh;
    margin-bottom:5vh;
    ---------------------------------*/
    /*---------------------set margins to match total  height of parent di----------------------------------------*/
      }
    </style>           
</head>  
<body>
    <div class="thirddiv">
       <div class="thirdclassclassone">
       <img src="ireland.png">
    </div>      
</body>
</html>

---

##Both Vertically and Horizontally center of the Page
.box{
    width: 300px;
    height: 300px;
    background-color: #232532;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

---

样式.css

img#center-img{

 display: block;
 margin: auto;
}

html

<html>
  <body>
    <div>
      <img src='pic.png' id='center-img'>
    </div>
  </body>
</html>

---

要使图像居中，请使用此 css。您必须在图像的第一个位置给出宽度。

img{
  width: 300px;
  position: fixed;
  left0;
  right:0;

}

---