position:relativeとabsoluteとtransform:translateを使ったセンタリング【どんな画面幅でも中央に配置する】
例えば、サイトのタイトルなど、どんな状況でも必ず中央に配置したい場合があるだろう。 そういう時は、positionとtransform:translateを使用することで解決できる。 ソースコード まずは下記のソースコードを動かしてもらいたい。 `<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Hello World test!!</title> <style> body{ /* ブラウザのデフォルトでmarginが付いているので消しておく。*/ margin:0; } .content_area { position:relative; /* content_areaの高さをブラウザの縦幅全開ま ...