「position:absoluteで中央寄せするのどうやるんだったっけ?」position:absoluteで上下左右中央寄せする方法を解説します。【方法1】transform:translate(-50%,-50%)中央寄せする要素に下記を指定しましょう。<div>position:absolute</div></div>transform:translate(○,○)は指定した分だけ要素をずらすCSSです。ずらす理由について下記で解説します。transformがない場合transformがない場合、要素の左上の頂点が中央に位置します。そこで要素の横半分、縦半分ずらすことで中央寄せを実現します。translate(-50%,0)」または「transform:translateX(-50%)」を指定しましょう。「top:auto」は初期値のため削除でもOKです。translate(0,-50%)」または「transform:translateY(-50%)」を指定しましょう。「left:auto」は初期値のため削除でもOKです。<div>position:absolute</div></div>CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む【方法2】margin:autowidthとheightが指定されている場合には下記の方法でも中央寄せできます。<div>position:absolute</div></div>top,left,bottm,rightをすべて同じ値にし、「margin:auto」を指定すると上下中央寄せになります。先述した通り、widthとheightがauto以外の値になっている必要があります。autoの場合は「transform:translate(-50%,-50%)」の方法を使いましょう。左右中央寄せ左右だけ中央寄せする場合は、「top」または「bottom」またはその両方の値をautoにしましょう。このとき、heightはautoでも構いません。<div>position:absolute</div></div>上下中央寄せ左右だけ中央寄せする場合は、「left」または「right」またはその両方の値をautoにしましょう。このとき、widthはautoでも構いません。○○;以上、position:absoluteで上下左右中央寄せする方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。