CSS を使用して画像を上下中央に配置する方法には、フレックスボックスを使用する、親コンテナのフレックス方向を列に設定する、コンテンツを揃える、項目を中央に揃えるなどがあります。絶対配置を使用し、画像の位置を絶対、上と左を 50% に設定し、オフセットに変換属性を使用します。グリッド レイアウトを使用するには、親コンテナの表示をグリッドに設定し、アイテムを中央に配置します。 object-fit 属性を使用して画像を中央に配置します
#CSS を使用して画像を上下に中央に配置する方法
CSS では、次のメソッドを使用して画像を上下の中央に配置できます:メソッド 1: flexbox を使用します
<code class="css">.container { display: flex; flex-direction: column; justify-content: center; align-items: center; } img { height: 100px; }</code>
メソッド 2: 絶対値を使用します位置決め
<code class="css">.container { position: relative; } img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }</code>
方法 3: グリッド レイアウトを使用する
<code class="css">.container { display: grid; place-items: center; } img { height: 100px; }</code>
方法 4: オブジェクトフィット属性を使用する
<code class="css">img { object-fit: contain; }</code>
方法 5 : パディングを使用する
<code class="css">.container { padding: 20px 0; } img { height: 100px; }</code>
方法を選択するための提案:
以上がCSSで画像を上下中央に表示させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。