More than 5 years have passed since last update.

【HTML】要素を画面の中央に表示する

HTML

Posted at 2013-08-05

よく忘れがちなのでメモメモ・・・

要素を水平に中央に表示するには、text-aling: centerがあるけど、垂直ってなるとなかなかこれといった方法がないですよねー。
今回、メモするのはいろいろと方法がある中ですごくシンプルな方法です。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
html {
  display: table;
}
body {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
</style>
</head>
<body>
<div>
<p>中央？</p>
</div>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up