概要

マークアップに慣れるまで縦横中央,右,左寄せを毎回調べていたのでメモ
本記事の方法以外にも手法はあるがよく使うものだけ抜粋

前提: ボックスモデルとは

インラインボックス
1. <span>, <a>など、同一行で横並びに配置されるもの
2. 幅・高さの指定はできない
3. 上下マージンの指定はできない
ブロックボックス
1. <div>, <p>, <ul>, <ol>, <table>など上から下に配置されるもの
2. 幅・高さ・パディング・マージンを設定できる

text-align

条件

親がブロック要素である
インライン要素の左右に余白があること
子のインライン要素が移動する

利用方法は

親のブロック要素に対して text-alignを設定する

●HTML -------------------------------
<div class="outer"> // ブロック要素
    テキストテキストテキスト // インライン要素
</div>

●CSS ---------------------------------
.outer {
  width: 100%;
  // 以下を追加
  text-align: center; //left, rightなど
}

mdn: https://developer.mozilla.org/ja/docs/Web/CSS/text-align

margin

条件

ブロック要素の左右に余白があること
ブロック要素ごと移動する

利用方法は

ブロック要素に対してmargin: 0 autoを設定する
縦移動についても同じ

●HTML -------------------------------
<div class="outer"> // ブロック要素
    <div class="inner">  // ブロック要素
        テキストテキストテキスト // インライン要素
    </div>
</div>

●CSS ---------------------------------
.outer {
  width: 100％;
  height: 1000px;
}
.inner {
  width: 50%  // 親要素の半分の横幅を指定して余白を作る
  height: 200px;
  // 以下を追加
  margin: 0 auto;
}

display: flex

条件

子のブロック要素の左右に余白があること

利用方法は

親に対して

●HTML -------------------------------
<div class="outer"> // ブロック要素
    <div class="inner">  // ブロック要素
        テキストテキストテキスト // インライン要素
    </div>
</div>

●CSS ---------------------------------
.outer {
  width: 100％;
  height: 1000px;
  // 以下を追加
  display: flex;
  justify-content: center;
  align-items: center;
}
.inner {
  width: 50%  // 親要素の半分の横幅を指定して余白を作る
  height: 200px;
  margin: 0 auto;
}

mdn: https://developer.mozilla.org/ja/docs/Web/CSS/justify-content