position: fixed;で、子要素を上下中央にしたい

Question

画面上部にヘッダを表示して、その中の子要素を上下中央に表示したいです。
.data にline-heightを設定してとりあえず上下中央を実現することは出来たのですが、
これは正しい使い方なのでしょうか？

なんとなく、これは正しい使い方ではない気がしたので質問をしました。

ヘッダは画面上部に表示し続けたいので、#headerのpositionにはfixedを設定しています。

<div id="header">
	<span class="data">データ1</span>
	<span class="data">データ2</span>
</div>

#header {
	position: fixed;
	background-color:#f8f8f8;
	height:50px;
	width: 100%;
	border-bottom: solid;
	border-color: #e7e7e7;
	border-width: 1px;
}

.data {
	line-height: 50px;
	vertical-align: middle;
	color: #000;
}

Answer 1

こんにちは。

やりたいことが実現できているのであれば、問題ないのではと思います^^

以下はご参考までに、、、
外の要素の高さを固定したら、中の要素の位置は50%で指定し、中の要素の高さの半分を引く
ことが多いようです。

↓は天地中央の例なので、横の部分を除いて考えればよいと思います。

<div id="center02">
<div class="inner">
<p>天地中央（position）<br>
天地中央（position）<br>
天地中央（position）</p>
<!-- / .inner --></div>
<!-- / #center02 --></div>

#center02 {
    position:relative; /* 絶対配置の基準点 */
    width:100%; /* 600px以下は幅いっぱいに広げる */
    max-width:600px; /* 最大幅の指定 */
    height:300px; /* 高さの指定 */
    margin:0 auto; /* ブロック要素の中央揃え */
    text-align:center; /* インライン要素の中央揃え */
    background:#fff; /* 背景色 */
}
#center02 .inner {
    position:absolute; /* 絶対配置 */
    top:50%; /* 上から半分 */
    left:50%; /* 左から半分 */
    width:100%; /* 大枠と同じ幅に */
    margin:-1.5em 0 0 -50%; /* 要素の大きさの半分引く */
}

「【CSS】様々な要素を中央揃えにする方法 － 02.positionを使って天地中央に要素を揃える」より抜粋