How to center an image in the middle of a div?

This question already has an answer here:

  • How to make an image center (vertically & horizontally) inside a bigger div 36 answers

  • 简单而简单的方法来做到这一点,

    .test {
      background-color: orange;
      width: 700px;
      height: 700px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    <div class="test">
    <img src="http://via.placeholder.com/350x150">
    </div>

    To vertically center your div, you can use positioning. Just apply

    position: relative;
    top: 50%;
    transform: translateY(-50%);
    

    to your image, and it will be vertically centered.

    .test {
      background-color: orange;
      width: 700px;
      height: 700px;
      text-align: center;
    }
    
    .test>img {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    <div class="test">
      <img src="http://via.placeholder.com/350x150">
    </div>

    You can use the simplest way -> display: table-cell; which allows you to use vertical-align attribute

    .test {
      background-color: orange;
      width: 500px;
      height: 300px;
      text-align: center;
      display: table-cell;
      vertical-align: middle;
    }
    <div class="test">
    <img src="http://via.placeholder.com/350x150">
    </div>
    链接地址: http://www.djcxy.com/p/75752.html

    上一篇: 如何使用CSS在div中居中放置图像?

    下一篇: 如何在div中间放置图像?