中央寄せが上手くいかない

HTML
1  <body>
2    <div class="wrapper">
3      <header>
4        <div>
5          <h2 class="font-weight-lighter pt-3 pb-3">Enjoy Your Dinner</h2>
6        </div>
7      </header>
8      <div class="container message">
9        <h2 class="top_message">Enjoy Your Dinner</h2>
10        <p class="mb-5 bottom_message">Feel Like You Are In Italy in NYC</p>
11      </div>
12    </div>
13  </body>

CSS
1.wrapper {
2  position: relative;
3  width: 100%;
4  height: 100%;
5}
6
7.message {
8  position: absolute;
9  top: 0;
10  right: 0;
11  bottom: 0;
12  left: 0;
13  margin: auto;
14  max-width: 490px;
15}
16
17.top_message {
18  margin: auto;
19  text-align: center;
20  margin: 0 auto;
21  color: #fff;
22  padding: 10px 0;
23  border-top: solid 1px #fff;
24  border-bottom: solid 1px #fff;
25}
26
27
28.bottom_message {
29  text-align: center;
30  margin: 0 auto;
31  color: #fff;
32  font-size: 20px;
33  letter-spacing: 5px;
34}
35

wrapperクラスを基準にmessageクラスを上下左右中央寄せしたいのですがなかなかうまくいきません。 display: flex; justify-content: center; align-items: center;　なども試しましたが、ダメでした。他に方法はあるでしょうか？　よろしくお願いします。

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

回答2件

position: absoluteの要素を中央揃えしたい場合は、transform を使う方法が一般的です。

css
1.wrapper {
2  position: relative;
3  width: 100%;
4  height: 100%;
5}
6
7.message {
8  position: absolute;
9  top: 50%;
10  left: 50%;
11  transform: translate(-50%, -50%); /* 自身の大きさの1/2分だけ左上に移動 */
12  max-width: 490px;
13}

投稿2019/02/17 16:28

yhg

総合スコア2161

gakukozuki

2019/02/17 16:54

ありがとうございます！

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

ベストアンサー

該当要素には「height指定」がないので、位置指定での中央寄せは出来ません。

display: flex; justify-content: center; align-items: center;　なども試しましたが、ダメでした。

<h2>と<p>を縦に並べるのでしょうか？であれば、指定が一つ抜けています。 ```CSS .message { display: flex; flex-direction: column;　/* ← 追加 */ justify-content: center; align-items: center; } ```

投稿2019/02/18 01:58