縦の中央寄せの仕方を教えてください。

###前提・実現したいこと
縦の中央寄せが出来ず、方法を教えて頂ければと思います。

###発生している問題・エラーメッセージ

###該当のソースコード

html
1    <section id="main">
2      <h1>#HelloWorld</h1>
3    </section>

css
1#main{
2  clear:both;
3  height:300px;
4  background-color: #AAFFF0;
5}
6
7#main h1{
8  text-align: center;
9  font-size:150px;
10  color:#444444;
11}

###試したこと
vertical-align: middleを試してみましたが、縦中央寄せになりませんでした。

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

回答4件

vertical-alignプロパティにこだわらないならば、以下のようにも行えると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        #main {
8            display: flex;
9            align-items: center;
10            justify-content: center;
11            clear: both;
12            height: 300px;
13            background-color: #AAFFF0;
14        }
15
16        #main h1 {
17            font-size: 150px;
18            color: #444444;
19        }
20    </style>
21</head>
22<body>
23<section id="main">
24    <h1>#HelloWorld</h1>
25</section>
26</body>
27</html>

投稿2017/06/11 13:55

s8_chu

総合スコア14731

どうしても"vertical-align"をしたい"なら…

css
1#main{
2  clear:both;
3  height:300px;
4  background-color: #AAFFF0;
5  display: table-cell;
6  vertical-align: middle;
7}

投稿2017/06/11 13:20

編集2017/06/11 13:21

yuki84web

総合スコア1857

CSS
1#main {
2  position:relative;
3}
4#main h1 {
5  position:absolute;
6  left:50%;
7  top:50%;
8  transform:translate(-50%,-50%);
9}

結構、色んな所で回答されていますが…

投稿2017/06/11 13:12

LibertyBell3

総合スコア1084

ベストアンサー

vertical-alignはtdとかしかきかなかったはず。
参考：スタイルシートリファレンス：vertical-align
h1のpadding,marginを0にして#mainのpaddingのtopとbottomを同じ数値にするといい感じになるはず。
#mainのheightを固定にする場合は注意が必要です。

投稿2017/06/11 12:24