パーセントで指定された大きさを持つボックスを記事の中央に配置する方法についての考察

コリス さんのブログで、個人的に興味深い記事が紹介されていたので、ちょっと考察してみました。

adfasdfads-1
[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック | コリス

上記の記事で紹介されている方法は、端的に言えば、「transform:translate」を使って位置を調整する、ということだと思うのですが、

<div style="width:100%;height:1000px;border:1px solid #ccc;position:relative;">
<div style="position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);width:40%;height:50%;padding:20px;background:red;color:white;box-shadow:0 0 30px rgba(0,0,0,0.2);">
てすてす
</div>
</div>

adsfadfads

以下の記事によると「transform」は ie8 より古いバージョンでは使えないようです。

私の中では「table-cell」を使えそうな気がしたので試してみたら、一応はできました。

<div style="width:700px;height:1000px;border:1px solid #ccc;position:relative;display:table-cell;vertical-align:middle;">
<div style="color:white;width:40%;height:50%;padding:20px;box-shadow:0 0 30px rgba(0,0,0,0.2);background-color:red;margin:auto;">
てすてす
</div>
</div>

adfadfad

しかし、この方法だと、親のボックスに固定幅を指定しないといけないので、ちょっと使い勝手が悪そうです。つまり、表(テーブル)の挙動と同じ感じです。

一方、元となっている記事のコメント欄によると、シンプルに「margin: auto」を使っても大きさ可変のボックスの中央配置はできるようです。

<div style="width:100%;height:1000px;border:1px solid #ccc;position:relative;">
<div style="position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:40%;height:50%;background:red;color:white;padding:20px;box-shadow:0 0 30px rgba(0,0,0,0.2);">
てすてす
</div>
</div>

sdgsgsfdg

以上、大きさが可変のボックスの中央配置についての考察でした。

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。