要素を画面のど真ん中にもってくる方法【CSS】

hoge

h1タイトルを、最初に画面のど真ん中にドカーンと持ってきて、その後に数秒経ったら自動でフェードアウトで消えるものを作りたいな~と思った。

 

まずは、ど真ん中に表示させるものを作る。

 

１行バージョン

【条件】
・h1タイトルは１行以内に収まる短いものをする。

 

HTML

<h1>あいうえお</h1>

 

CSS

h1{
	position:fixed; /* 用途に併せて、absoluteでもOK */
	width:100%;
	height:100vh;
	text-align:center;
	top:50%; /* 上から半分の位置 */
}

 

複数行バージョン

【条件】
・h1タイトルが複数行に渡るもの。

 

HTML

<h1>あいうえお<br />かきくけこ<br />さしすせそ</h1>

 

CSS

header{
	width:100vw;
	height:100vh;
	text-align:center;
	display: table;
	line-height:1;
	font-size:5vw;
}
h1{
	display: table-cell;
	vertical-align:middle;
}

 

次に、１０秒経ったら自動でフェードアウトで消えていくようにする。

CSSのアニメーションを使用。ベンダーフィックスはお好みで。

h1{
	-webkit-animation: fadeout 10s linear both;
	-moz-animation: fadeout 10s linear both;
	-ms-animation: fadeout 10s linear both;
	animation: fadeout 10s linear both;
}
@keyframes fadeout {
	0% {opacity:1;}
	50% {opacity:1;}
	100% {opacity:0;}
}
@-webkit-keyframes fadeout {
	0% {opacity:1;}
	50% {opacity:1;}
	100% {opacity:0;}
}
@-moz-keyframes fadeout {
	0% {opacity:1;}
	50% {opacity:1;}
	100% {opacity:0;}
}
@-ms-keyframes fadeout {
	0% {opacity:1;}
	50% {opacity:1;}
	100% {opacity:0;}
}