ブロック要素の上下左右中央寄せがわからない。

ページのど真ん中に全ての要素を持って行きたい。

サイトの最後に書いてあることをまねして見たが、できなかった。

http://ideahacker.net/2015/02/14/9779/

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>5 seconds!</title>
6  <link rel="stylesheet" href="css/styles.css">
7</head>
8<body>
9  <div id="container">
10    <div id="all">
11      <div id="discription">
12        <p>さあ、あなたは5秒で止められるかな？</p>
13          <ol>
14            <li>Startを押す</li>
15            <li>5秒たったと思ったらStopを押す</li>
16          </ol>
17      </div>
18      <div id="target">5.000</div>
19        <div id="result" class="standby">0.000</div>
20          <div class="buttons">
21            <div id="start">Start</div>
22              <div id="stop">Stop</div>
23          </div>
24        </div>
25    </div>
26<script src="js/main.js"></script>
27</body>
28<html>
29

CSS
1
2#container {
3  font-family: 'Courier New',sans-serif;
4  width: 300px;
5  height: 315px;
6  position: relative;
7  /* margin: 30px auto 0; */
8  text-align: center;
9  font-weight: bold;
10}
11
12#all {
13  position: absolute;
14  top: 0;
15  right: 0;
16  bottom: 0;
17  left: 0;
18  width: 300px;
19  height: 315px;
20  /* margin: auto; */
21  background: skyblue;
22}
23
24#discription p {
25  color: red;
26}
27
28#target,#result {
29  font-size: 32px;
30  margin-bottom: 15px;
31  background: #ccc;
32  height: 60px;
33  line-height: 60px;
34}
35
36#result.perfect {
37  background: #fa5858;
38  color: #fff;
39}
40
41#result.standby {
42  opacity: 0.5;
43}
44
45#result.perfect {
46  background: #fa5858;
47  color: #fff;
48}
49
50#start {
51  float: left;
52}
53
54#stop {
55  float: right;
56}
57
58#start,#stop {
59  cursor: pointer;
60  font-size: 18px;
61  width: 145px;
62  background: #eee;
63  height: 40px;
64  line-height: 40px;
65  box-shadow: 0 6px 0 #ccc;
66}
67
68#start.pushed, #stop.pushed {
69  margin-top: 3px;
70  box-shadow: 0 3px 0 #ccc;
71
72}
73

JS
1(function() {
2  'use strict';
3
4  var start = document.getElementById('start');
5  var stop = document.getElementById('stop');
6  var result = document.getElementById('result');
7  var startTime;
8  var isStarted = false;
9
10  start.addEventListener('click',function() {
11    if (isStarted === true) {
12      return;
13    }
14    isStarted = true;
15    startTime = Date.now();
16    this.className = 'pushed';
17    stop.className = '';
18    result.textContent = '0.000';
19  });
20
21  stop.addEventListener('click',function() {
22    var elapsedTime;
23    var diff;
24    if (isStarted === false) {
25      return;
26    }
27    isStarted = false;
28    elapsedTime = (Date.now() - startTime) / 1000;
29    // elapsedTime = 4;
30    // result.textContent = elapsedTime;
31    result.textContent = elapsedTime.toFixed(3);
32    this.className = 'pushed';
33    start.className = '';
34
35    //  constructor() {
36
37    // }
38    // }
39    result.className = '';
40    diff = elapsedTime - 5.0;
41    //if (diff > -1.0 && diff < 1.0) {
42      if(Math.abs(diff) < 1.0) {
43        result.className = 'perfect';
44    }
45  });
46})();
47

yambejp

2018/10/09 02:04

左右の真ん中はともかく、上下の真ん中というのは定義が難しい。ページ全体の真ん中なのか見えている領域の真ん中なのか。bodyの長さが足りないときにどうしたいのか・・・など仕様を決め込む必要があります

hikari_poppo

2018/10/09 02:06

見えている領域の真ん中にしたいです。

退会済みユーザー

2018/10/09 02:56

サイトだと中央に寄せたいものの外側のサイズが指定されているから指定の記述ではできません。

hikari_poppo

2018/10/09 04:21

#containerのサイズの指定をなくせばいいのでしょうか？初心者のためよくわからないため、もう少し詳しく教えていただいてもいいでしょうか

行動規範の内容に同意します

回答2件

すごい無理やりですが一つないこともないです。
ただし16:9のパソコンのみ有効です。

HTML
1<div class="sotogawa">
2</div>
3<div class="uchigawa">
4あいうえお
5</div>
6<div class="sotogawa">
7</div>

CSS
1.sotogawa {
2  position: relative;
3  width: 100%;
4  height: 100%;
5  padding: calc(900% / 32 - 0.5em) 0 0;
6  background-color: #999;
7}
8.uchigawa {
9  margin: auto 0;
10}

スマホ用に3:4も作るとなると
前お教えした二つに分岐する方法のpc.cssに上をso.cssに下を追加してください。

CSS
1.sotogawa {
2  position: relative;
3  width: 100%;
4  height: 100%;
5  padding: calc(400% / 6 - 0.5em) 0 0;
6  background-color: #999;
7}
8.uchigawa {
9  margin: auto 0;
10}

あと文字の関係上ちょっとだけ16:9や3:4じゃなくなります。

投稿2018/10/09 03:29

編集2018/10/09 03:42

退会済みユーザー

総合スコア0

hikari_poppo

2018/10/09 04:20

この無理やりではない方法以外はありますか？今私が書いてあるコードを変えてもいいのですが・・・

退会済みユーザー

2018/10/09 07:17

無理やりといっても端末の縦幅の半分の四角を文字の上下にやることによって擬似的に表現しています。しかし、BAの方が正しいのでそちらを参考にしてください。

hikari_poppo

2018/10/09 07:50

わかりました。ありがとうございます

行動規範の内容に同意します

ベストアンサー

CSSに以下を追加

CSS
1html, body {
2  width: 100%;
3  height: 100%;
4}
5
6body {
7  display: flex;
8  justify-content: center;
9  align-items: center;
10}

投稿2018/10/09 02:14

編集2018/10/09 05:29

root_jp

総合スコア4666

hikari_poppo

2018/10/09 02:34

上のコードで左右中央にはなったのですが、上下の中央にはなりません。どうしたらいいでしょうか？

root_jp

2018/10/09 05:30

HTMLとCSSをファイルに書いてブラウザで開いてみましたが、中央表示になっています。ファイル添付しました。

hikari_poppo

2018/10/09 06:50

もう一度試して見たら、左右中央寄せができました！なぜこのようなコードにしたのか教えていただけますか？ html, body { 特になぜhtml,bodyと書いたのか知りたいです

root_jp

2018/10/09 07:34

中央とは言うけど、どの長さを基準にしての中央なのか？ 500pxに対しての中央なのか？1000pxに対しての中央なのか？見えてる領域とは言うけど、そこには高さもなければ幅もありません。だから、見えてる領域全てに高さと幅を与えました。それが100％です。100vwと100vhでもいいかもしれません。 #containerはどの長さを基準にするのか？ ⇒ body bodyはどの長さを基準にするのか？ ⇒ html だから、htmlとbodyに長さを与えました。

hikari_poppo

2018/10/09 07:49

見えている範囲の１００％で大丈夫です。 htmlとcssに書いたことがなかったので、驚きました。htmlと書いていいんですね。

root_jp

2018/10/09 08:00

CSSに書いているhtmlとは特別なものではなく、タグのことです。htmlタグです。記載されているHTMLに<html>タグありますよね。それです。 pやdivと同じです。

行動規範の内容に同意します

あなたの回答