第26回　position:absolute　上下左右をセンターに

これはテクニック的な話です。

CSSで要素を上に載せる、例えば、画像の上に文字を載せるというやり方に、

position:absolute　というやり方があるのですが、

目測でその文字をセンターに持ってきてもいいのですが、

几帳面な性格の私は、機械的にバシッとセンターにする方法は何かないのか、と探しましたところ、

ありました。

position:absoluteと記述したら、その下に、

top:50%;

left:50%;

transform:translate(-50%,-50%);

と表記すれば、だいたいセンターにバシッと来ます。

だいたい？そう、だいたいです。文字の大きさやフォントの種類によって、ん？というときもありますが、

その時は仕方ない、目測でやりましょう。

まあ、ある程度のことは多めに見ましょう、というお話でした。

ちなみに、この transform:translate というCSSのセレクター及びプロパティ（CSS用語）は

他の、例えば、fedein（フェードイン）という装飾などにも使用されるセレクターなので、

覚えておくと便利です。