上下左右ど真ん中の表示。
何度かチャレンジしていて、なんかどんどん難しく考えてしまっていたのですが、
かなりスマートに作れるTipsを紹介してくれていたので、さっそく使ってしまいました。
作者さまありがとうございます。

CSSのみでボックスをページの真ん中に設置するポジショニング方法[CSS]

いたって簡単！！
ボックス指定で一旦left:50%指定を入れてあげて、
でもこれだとボックスの右端からの真ん中を選びに行ってしまって、ボックス中央からの50%になっていないので、さらに、
このボックスの中にleft:50%を指定する別のボックスを入れ子にする。

実際のソース見て、
「ああ、そうだよね。そりゃそうだ」と気づくも、言われるまでわからない・・・・切ないです。

body {background:#eee;}
#Wrapper,
#Container {
	height: 500px;
	width: 600px;
}
#Wrapper {
	bottom: 50%;
	right: 50%;
	position: absolute;
}
#Container {
	left: 50%;
	position: relative;
	top: 50%;
	background:#fff;
}

<div id="Wrapper">
  <div id="Container">
    <p>ココに内容を書いていきます。</p>
  </div>
</div>
タグ:, , , , , , ,

関連する投稿