「align-items:center;」「vertical-align:middle;」line-heightで要素を上下中央に配置するcssの方法

HTML

<div class="sample">
  sample
</div>

divタグ（ブロック要素）の中に、文字の行があります。

CSS

.sample{
  background-color: yellow;
  border: 2px solid black;
  text-align: center;
  
  font-size: 30px;
  line-height: 3;
}

文字の大きさが30pxの場合

line-height:3;を指定すると、行の高さが「30px ✖ 3」の90pxになります。

高さ90pxの行の上下中央に文字を表示します。

HTML

<div class="sample">
  <div class="inner">
    sample
  </div>
</div>

.smapleというブロック要素の親要素の中の、

.innerというブロック要素の子要素に、

文字などが配置されます。

CSS

.sample{
  background-color: yellow;
  border: 2px solid black;
  height: 100px;
  font-size: 30px;

  display: flex;
  justify-content: center;
  align-items: center;
}

親要素 .sample に指定します。

display:flex; flexコンテナを指定

justtify-content:center; 子要素の左右中央配置（必要に応じ）

align-items:center; 子要素の上下中央配置

子要素の中央配置が決まります。

HTML

<div class="sample">
    <span class="base">X x</span><span class="middle">sample</span>
</div>

親要素 .sample の中に、大文字X と、小文字x　そして、sample という子要素を記入します。

CSS

.sample{
  background-color: yellow;
  border: 2px solid black;
  font-size: 20px;
}
.base{
  font-size:80px;
  background-color:bisque
}
.middle{
  vertical-align: middle;
  background-color:white;
}

一番目の子要素 .base を、

高さ80pxで表現し、

二番目の子要素 .middle に、

vertical-align:middle; を指定すると、

高さ20pxの文字列は、高さ80pxの小文字ｘのベースラインから、小文字 x の高さの半分の位置に、中央を揃えます。

分りづらいですが、厳密に中央ではありません。

HTML

<div class="sample">
  <div class="sample1">sample1</div>
  <div class="sample2">sample2</div>
</div>

親要素 .sample の中に、sample1 と、sample2 という子要素を記入します。

CSS

.sample{
  font-size: 20px;
  background-color: yellow;
  border: 2px solid black;
}
.sample1{
  display:inline-block;
  height:100px;
  vertical-align: middle;
  background-color: bisque;
}
.sample2{
  display:inline-block;
  vertical-align: middle;
  background-color:white;
}

親要素 .sample の中に、中央寄せしたい子要素 .sample1 と .sample2 を設定します。

子要素 sample1,sample2 に、display:inline-block; vertical-align:middle; を指定します。

.sample1 では、height:100px;がブロックの高さいっぱいに広がっています。

.sample2 では、height の指定がないので、文字列が親要素の高さの上下方向の中央に位置します。

HTML

<div class="sample">
  <div class="inner">
    sample
  </div>
</div>

高さのある、ブロック要素 .sampleの中の、

子要素 .inner に、文字列 sampleを書く

CSS

.sample{
  background-color: yellow;
  border: 2px solid black;
  height: 100px;
  text-align: center;
  font-size: 30px;

  display: table;
  width:100%;
}
.inner{
  display:table-cell;
  vertical-align: middle;
}

親要素 .sample に、

display:table; を指定して、表<table>扱いにします。

子要素 .inner に、

display:table-cell; を指定して、表のセル扱い ‘td’ にします。

vertical-align:middle; で表同様、上下中央配置ができます。

HTML

<div class="sample">
  <div class="inner">
    sample
  </div>
</div>

親要素 .sample の中の、子要素 .inner に、文字列 sample を記入します。

CSS

.sample{
  background-color: yellow;
  border: 2px solid black;
  height: 100px;
  font-size: 30px;
  position: relative;
}
.inner{
  position: absolute;
  top:50%;
  left:50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

親要素 .sample に、

position:relative; を指定し、配置の基準を宣言します。

子要素 .inner に、

position:absolute;を指定します。

top:50%; left:50%; 子要素の左上隅を親要素の上下左右中心に移動します。

transform: translateY(-50%) translateX(-50%); 文字列の大きさを、Y軸方向、X軸方向に、半分づつ戻します。