見出し画像

CSSメモ　position:fixed

エル×WEB制作・デザイン勉強中！

header__nav等、固定する時のプロパティー

中央配置したい時

margin-left:auto,margin-right:autoは効かない！！

.クラス名{
  position: fixed;
  margin: auto;  
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

または

.クラス名{
  position: fixed;
  inset: 0;
  margin: auto;
}

を記述する。
対象のサイズが決まっていない場合はさらに下の記述が必要になる

.クラス名{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%)
             translateY(-50%);
}


この記事が気に入ったらサポートをしてみませんか？