Question

我有一个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先生的帮助

Answer 1

您可以在将父容器 （inner-div）设置为relative position的同时，使用绝对定位并转换为img ：

   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>

Answer 2

有更多方法可以做到这一点我建议使用flex。将其添加到您的代码中：

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

小提琴示例：https://jsfiddle.net/femu288x/

Answer 3

https://css-tricks.com/centering-css-complete-guide/有很多例子或方法可以做到这一点。位置：绝对答案是一种方式，另一种是flex（我的收藏） - 在链接上检查它们并尝试

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

3 个答案: