Q&A
質問者さん、無言ですが、回答がいくつか出ているのでそれらに対するフィードバックをタイムリーに返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？ 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。とにかく無言は NG です。
引用テキスト表示内容全体をブラウザ画面の中央に表示する方法がわかりません。
横方向は中央に表示出来ています。
縦方向を中央にする方法がわからないため<br>やfontsizeで地道に調節しています。
なにかうまい手はありますか？
皆様ありがとうございます。
試してみます。
追記
試してみましたが、残念ながら縦方向はセンターに来るものの縦に並べたいものが横に並んでしまいます。
HTML/CSS
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 2<!DOCTYPE html> 3<html lang="ja"> 4<body> 5 <div id="br_area"></div> 6 <h1 class="m1"> 7 <div id="m1"></div> 8 </h1> 9 <h1 class="m2"> 10 <div id="m2"></div> 11 </h1> 12 </p> 13</body> 14</html> 15 16<script> 17var m1 = "AA"; 18var m2 = "TEST"; 19document.getElementById('m1').innerHTML = m1; 20document.getElementById('m2').innerHTML = m2; 21</script> 22 23<style> 24 .m1 { 25 font-family: Roboto; 26 font-size: 180px; 27 font-weight: bold; 28 line-height: normal; 29 padding: 0 0 0; 30 text-align: center; 31 align-items: flex-end; 32 color: #000; 33 } 34 .m2 { 35 font-family: 'arial black'; 36 font-size: 70px; 37 font-weight: bold; 38 line-height: 0; 39 padding: 0 0px; 40 text-align: center; 41 align-items: flex-start; 42 color: #000; 43 } 44</style>
回答5件
0
水平方向も垂直方向も画面中央に配置したいということですね。
css
1body { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 min-height: 100vh; 6 margin:0; 7 padding:0; 8}
サンプル
CSS: Display the content in the center of the browser vertically and horizontally
追記
試してみましたが、残念ながら縦方向はセンターに来るものの縦に並べたいものが横に並んでしまいます。
flex-direction: column; を追加すれば縦並びになります。
css
1* { 2 margin: 0; 3 padding: 0; 4} 5body { 6 display: flex; 7 justify-content: center; 8 align-items: center; 9 flex-direction: column; 10 min-height: 100vh; 11}
投稿2022/05/26 00:47
編集2022/06/05 23:46
総合スコア34367
0
普通に上下中央にすれば良いだけよね？
前提
こちらのコードは掲載したコードだけで、実装した場合に正しい挙動を取ることを保証します。
HTML要素に他のコードを記述した場合思わぬ挙動をする場合があります。試す際は新しくプロジェクトを作成してください。ポイントはposition: absolute;になります。 position:relativeと組み合わせる場合が多いです。
こちらはCSSを学習し始めた方が最初に直面する難しい壁みたいなもので、理解していないと正しく動かすことができません。Youtube等を見て学習してください。
html構造がぐちゃぐちゃしていてわかりづらかったので全部書き直しました。
デザインは色合いやfont等細かい部分以外は一緒にしてます。
JavaScriptでDOM操作して文字を挿入していましたが、どのような意図があるのでしょうか？
JavaScriptは利用せずとも期待の表示を実現することは可能ですし、むしろ使わないのが一般的です。どうしてもDOM操作(JSを利用して文字を挿入したい)のであれば、HTMLの該当文字を消したあと、記載しているJS実装してください。その際JavaScriptファイルの読み込ませ方には気をつけてください。
Bodyの一番最後で読み込む。もしくはheadでdefer属性をつけて読み込んでください。
コード
html
1<div class="contents__wrapper"> 2 <p class="title">AA</p> 3 <p class="sub__title">test</p> 4</div>
css
1.contents__wrapper { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%, -50%); 6} 7 8.title { 9 font-size: 180px; 10 font-weight: bold; 11 line-height: 1; 12} 13 14.sub__title { 15 font-family: 'arial black'; 16 font-size: 70px; 17 font-weight: bold; 18 line-height: 0; 19 text-align: center; 20}
以下JavaScriptを使用する場合
js
1// ES5で書かれていましたが、ES6で書き直しました。現在の主流はES6 2// こちらを実装する場合はHTML要素の該当文字は削除してください。 3// 消さなくても動きますが笑 4 5// 1. 挿入先の要素を取得 6// 2. 取得した要素に文字列を挿入 7const targetTitle = document.querySelector('.title') 8targetTitle.textContent = 'AA' 9 10const targetSubtitle = document.querySelector('.sub__title') 11targetSubtitle.textContent = 'test'
投稿2022/06/05 09:20
総合スコア193
0
縦方向はスクロールする前提のページがほとんどなので「センタリング」という概念が乏しいです。
スクロールを禁止するならこんな感じで
css
1body{ 2display: flex; 3justify-content: center; 4align-items: center; 5height:100%; 6margin:0; 7padding:0; 8}
投稿2022/05/26 00:17
総合スコア117908
0
以下の記事は参考になりませんか？
ブラウザ画面でセンタリング
http://surferonwww.info/BlogEngine/post/2018/11/01/content-horizontally-vertically-centered-on-screen.aspx
CSS のみを使ってブラウザ画面上でコンテンツを上下左右センタリングする方法です。
投稿2022/05/25 23:59
退会済みユーザー
総合スコア0
0
水平（Horizontally）、垂直（Vertically）、水平垂直（Both Horizontally & Vertically）のそれぞれでコピペできるCSSがあって分かりやすそうなページを見つけました。
Centering in CSS: A Complete Guide
https://css-tricks.com/centering-css-complete-guide/
投稿2022/05/25 23:50
総合スコア777
あなたの回答
tips
プレビュー
