css3で画像を中央に配置するために使用できる要素はどれですか

css3 では、[align-items:center] 要素と [justify-content:center] 要素を使用して画像を中央に配置できます。 align-items プロパティは、フレックス コンテナーの現在の行の垂直軸に沿ったフレックス項目の配置を定義します。

メソッド:

2 つの属性 align-items:center (垂直方向の中央揃え) と justify-content:center (水平方向の中央揃え) を使用します。

align-items プロパティは、フレックス コンテナーの現在の行の垂直軸方向におけるフレックス項目の配置を定義します。

(学習ビデオの推奨: css ビデオ チュートリアル)

html:

<div class="container container-2">
    <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
</div>

css:

.container-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex-box;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    text-align: center;
}

は OKこれを実現するには、絶対位置マージンを使用します。

画像は外側のレイヤーを基準にして浮動し、マージン: auto

HTML：

<h3 class="demo">绝对定位+Margin</h3>
<div class="container container-1">
    <img src="http://scrm-staging-cdn.oss-cn-hangzhou.aliyuncs.com/avatar/wechat/aHR0cDovL3d4LnFsb2dvLmNuL21tb3Blbi9YeFQ5VGlhSjFpYmYzdFk4b2hENHFpYmxkTUdEbk1NRXFuZVdlZk5pY2lic1h1MjFZdHAxV1o2bGsxUTFVeE9vSzY4QVJEa0tRZ05OYWgzeTFzY01YUUp3clBRLzA=">
</div>

CSS：

.container-1 {position: relative;}

.container-1 img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}

関連する推奨事項:CSSTutorial

以上がcss3で画像を中央に配置するために使用できる要素はどれですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。