[JS]スタイルシート初心者にも優しい！要素を天地左右中央に配置できる簡単超軽量スクリプト -Midway.js
Post on:2013年6月4日
sponsors
デスクトップやスマフォ・タブレットのレスポンシブ対応で、画像やテキストなどを天地左右の中央に簡単に配置できる超軽量（1KB）のスクリプトを紹介します。
作業は、HTMLに2つ追加するだけです。
Midway.jsのデモ
天地左右中央配置は表示サイズを変更しても、変わらずに天地左右中央配置になります。
デモは、ブルーの矩形の中に、ホワイトの要素を天地左右中央配置にしています。
まずは、デスクトップサイズから。
デモページ：幅1200pxで表示
タブレットの780pxにサイズを変更しても、天地左右中央配置です。
デモページ：幅780pxで表示
IEでもOK。
デモページ：IE7モードで表示
Midway.jsの使い方
使い方は簡単で、ステップは2つです。
Step 1: 外部ファイル
head内に、スクリプトを外部ファイルとして記述します。
<head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="midway.min.js"></script> </head>
Step 2: HTML
天地左右中央配置にする要素のclassに「centerHorizontal centerVertical」を加えます。
デモでは、ブルー矩形（#parent）があり、その中のdiv要素にclassを加えています。
<div id="parent"> <div class="centerHorizontal centerVertical" id="child"></div> </div>
参考：CSS
スタイルシートの元となっているのは、下記の記事です。
スタイルシートはこんな感じです。
#outer{
position: relative;
width: 40%;
height: 120px;
margin: 20px auto;
border: 2px solid #c00;
}
#inner{
position: absolute;
width: 100px;
height: 100px;
top: 10px;
left: 50%;
margin-left: -50px;
background-color: #00c;
}
sponsors
