cssで絶対中央とどのようにもっと簡潔に中央のimgを実現します

938 ワード

1つ目:親に定義する伸縮ボックス
            display: flex;             justify-content: center;//水平中央align-items:center;//垂直方向中央揃え
注意:marginを追加できません.そうしないと無効です.padding(追加できますか?)
2つ目:箱の長さと幅を知らない:(比較的良い)
垂直水平中央:top、right、bottom、leftはすべて0で、margin:auto;親ボックスの相対的な位置付け、position:relative;サブボックスの絶対位置を指定します.position:absolute;
第三種類:箱の長さと幅の親要素の相対的な位置決めサブ要素の絶対的な位置決めleft:50%を知っている.top: 50%; margin-left:負のサブボックスの幅は半分です.margin-top:負のサブボックスの高さの半分;
4つ目:css 3 translateプロパティを使用し、オフセット量を使用します.
親ボックスの相対的な位置付け、position:relative;サブボックスの絶対位置を指定します.position:absolute;
サブボックス:
left: 50%; top: 50%; transform: translate(-50%,-50%);
6つ目:
ボックス外枠を設定し、外箱を中央にし、左右の外枠値を等しく(長さが未知)水平に中央にする:divのpositionがrelative(相対位置決め時に有効、絶対位置決めが無効)
 
水平方向中央:divに幅を設定し、margin:0 autoプロパティを追加
 div{
 	width:200px;
 	margin:0 auto;
  }

より簡潔にimgを1つ選びます.
display:table-cell; text-align:center; vertical-align:middle;