中央の画像と同じ高さを維持する

Question

元のサイズを変更せずに親div内のCSSのみを使用して画像を中央に配置するにはどうすればよいですか？

水平方向へ

.main-img { 
 
      display: block; 
 
      width: 180px; 
 
      overflow: hidden; 
 
      align-self: flex-start; 
 
     }

<div class="main-img"> 
 
    <img src="http://via.placeholder.com/300x50.png" width="1280px" height="550px" alt="main image" /> 
 
</div>

Answer 1

ウェイ1：水平 ：垂直

.main-img img { 
    display: block; 
    margin: auto; 
} 

：

.main-img { 
    height: 180px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.main-img img { 
    width: 200px; 
    height: 200px; 
} 

ウェイ2：水平 ：

垂直

.main-img { 
    /* ... other code here such as width and height ... */ 
    position: relative; 
} 
.main-img img { 
    position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
} 

：垂直方向と水平方向

.main-img { 
    /* ... other code here such as width and height ... */ 
    position: relative; 
} 
.main-img img { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

：

.main-img { 
    /* ... other code here such as width and height ... */ 
    position: relative; 
} 
.main-img img { 
    position: relative; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

Answer 2

<div>要素は、デフォルトでblock-levelある（したがって、あなたが実際にdisplay: blockを必要としない）として、あなたがmargin: 0 autoを探している、あなたの要素をセンタリング：

.main-img { 
 
    margin: 0 auto; 
 
    width: 180px; 
 
    overflow: hidden; 
 
    align-self: flex-start; 
 
}

<div class="main-img"> 
 
    <img src="http://via.placeholder.com/300x50.png" width="1280px" height="550px" alt="main image" /> 
 
</div>

垂直センタリングはもう少し複雑であり、それはdisplay: flex、align-items: centerとjustify-content: centerプロパティ値を利用し、flexboxで水平方向と垂直方向の両方のセンタリングを達成するための最も簡単です。あなたもheightプロパティを指定する必要がありますことに注意してください：

.main-img { 
 
    height: 180px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.main-img img { 
 
    width: 140px; 
 
    height: 140px; 
 
}

<div class="main-img"> 
 
    <img src="http://via.placeholder.com/140x140.png" alt="main image" /> 
 
</div>

・ホープ、このことができます！ :)