上下中央揃え レスポンシブ対応

1行　上下センタリング

index.html

<div class="parent">
   <div class="child">
       テキスト
   </div>
</div>

style.css

.parent {
    height: 100px;
}
.child {
    line-height: 100px; 
}

1行　インライン要素もしくはテーブルセル

index.html

<div class="parent">
   <div class="child">
       テキスト
   </div>
</div>

sytle.css

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

grid

index.html

<div class="parent">
   <div class="child">
        テキストテキストテキスト
   </div>
</div>

sytle.css

.parent {
    display: grid;
    place-items: center;
}

flex

index.html

<div class="parent">
   <div class="child">
        テキストテキストテキスト
   </div>
</div>

sytle.css

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

絶対位置を使う

index.html

<div class="parent">
   <div class="child">
        テキストテキストテキスト
   </div>
</div>

sytle.css

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

複数行　上下センタリング

index.html

<div class="parent">
   <div class="child">
       テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
   </div>
</div>

style.css

.parent {
    
}
.child {
    display: grid;
	place-items: center center;
}