CSSにおけるposition:fixedによるdiv中央およびdiv内要素の中央化の実現方法

2469 ワード

position:fixed実装div中央コードは以下の通りである.
div{
    position:fixed;
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0;
    width:200px;
    height:150px;
}

左右を中心にするだけならbottom:0;またはtop:0;削除すれば上下中央だけならleft:0;またはright:0;すぐ
position:fixed実装divが中央になった後、私はこのdivに1枚の画像を置いて、左右の中央を実現して、コードは以下の通りです:
.img1{
  position: relative;
  margin: auto;
  padding-left: 50%;
  right: 30px;
  width:60px;
  height:60px;
}

親要素の位置に基づいて、まず全体の位置を右に50%オフセットします.この50%は要素全体を含んでいるので、中央に戻すには要素の半分をオフセットする必要があります.中央に位置合わせします.