CSS：如何在 div 中垂直和水平居中图像

debugcn 发表于 Dev

托马斯

我有一个 div 并且在 div 中我想将图像居中。

这是代码

 <div class="inner-div">
    <img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/5-1.gif"/>           
 </div>

.inner-div
{
  margin: auto;
  width: 100px;
  height: 100px;
  border-radius: 3px;
  display: table;
  vertical-align:middle; 
  text-align:center;
  background-color:red;
}

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

我使用上面的 css 但仍然没有运气。图像没有在 div 垂直和水平方向居中。这是 jsfiddle 链接https://jsfiddle.net/year4qt1/4/

寻找建议。

现在看起来不错https://jsfiddle.net/7t2fghtf/1/感谢@Highdef 先生的帮助

用户7207170

您可以在 img 上使用绝对定位和转换，同时将父容器 (inner-div) 设置为relative position：

   position:absolute; /* Absolute relative to inner-div */
   left:50%;   /* Top, left and transform for horizontal and vertical alignment without the use of margin or changing the display */
   top:50%;
   transform: translate(-50%,-50%);

小提琴：https : //jsfiddle.net/7t2fghtf/

$("#mybutton").click(function() {

  //  $.ajax("").done(function(){
  //          $("#mycontent").html( $("#anothermymodal").html()); 
  //          })
  setTimeout(function() {

    $("#mycontent").html($("#anothermymodal").html());
  }, 10000);

});

.inner-div {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  border-radius: 3px;
  display: table;
  vertical-align: middle;
  text-align: center;
  background-color: red;
  position: relative;
}

img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Small Modal</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" id="mybutton" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Small Modal</button>
  <div style="display:none" id="anothermymodal">

    <div class="modal-body">
      <p>This is a small modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>



<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content" id="mycontent">
      <div class="inner-div">
        <img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/5-1.gif" />
      </div>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。