More than 5 years have passed since last update.

単一要素の上下左右中央配置

HTML5
CSS3

Posted at 2014-02-13

ティーザーサイト等で、ページの上下左右中央に画像1枚だけ配置したい時

html

<html>
<body>
<div class="container">

<p class="img"><img src="img.jpg" alt="hoge" /></p>

</div>
</body>
</html>

css

html ,
body ,
.container {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

.container {
  display:table;
}

.img {
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}

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