1. ysakmrkm@github

    Posted

    ysakmrkm@github
Changes in title
+単一要素の上下左右中央配置
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,37 @@
+ティーザーサイト等で、ページの上下左右中央に画像1枚だけ配置したい時
+
+# html
+```html
+<html>
+<body>
+<div class="container">
+
+<p class="img"><img src="img.jpg" alt="hoge" /></p>
+
+</div>
+</body>
+</html>
+```
+
+# css
+```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;
+}
+
+```