【cssメモ】cssで中央揃え

◇本日のメモ

cssにて、中央にする方法

①文字を中央揃え

css

{text-align: center;}

②要素を中央揃え

css

{margin:0 auto;}

③display: flexにて中央揃え
こちらは記述した【子要素】が横並びになる。
なので、横並びにしたいものからみて、その親要素に記述
例えば親要素のｄｉｖ内にで３つの子要素があれば、親要素にdisplay: flexを記述して、その３つを横並ぶにする

css

{
 display: flex;
}

◇おまけ
display: flexのオプション。下記記述で縦並びに上下左右中央になる

css

{
  display: flex;
  flex-direction: column; /* 横要素にしたのを、縦並びに*/
  justify-content: center; /* 左右中央に*/
  align-items: center;/* 上下中央に*/
}

ありがとうございました！