ブラウザによって、誤差が 1px 程度あるみたいですが、だいたいにおいてこんなもので行けそうな気がします。
コンテンツ
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
$("#box")
.css(
{
"width": "400px",
"height": "200px",
"border": "1px solid #000"
}
);
var h1 = $("#box").outerHeight();
var h2 = $("#target").outerHeight();
$("#target")
.css(
{
"width": "200px",
"text-align": "center",
"border": "1px solid #000",
"margin-left" : "auto",
"margin-right" : "auto",
"margin-top": "calc( (" + h1 + "px / 2) - " + (h2/2+2) + "px )"
}
);
});
</script>
<div id="box">
<div id="target">コンテンツ</div>
</div>
$("#target").outerHeight() が、フォントサイズか line-height に影響を受けて、奇数の場合は 1ピクセルずれる感じです。
コンテンツ
|
|
【jQueryの最新記事】
- clipboard.js で、2種類のクリップボード処理オブジェクトを作成して使い分ける
- 一般的な PHP のアップロードページに対して jQuery の $.ajax でファイルをアップロードする
- jQuery の $.ajax で JSON 文字列を WEB より取得して TABLE を作成する
- jQuery で ページ内の画像のリンク切れを探してテーブルに URL を表示する
- クリックした入力フィールド以外をブラックアウトする jQuery プラグイン
- FORM の内容を localStorage に保存する jQuery プラグイン
- tableMagic : 単純に JSON から TABLE、TR、TH、TR、TD を作成する jQuery のプラグイン
- 滑らかなスクロール(scroll bar)を提供する jQuery プラグイン jQuery.NiceScroll
- jQuery : F1 キーでヘルプを起動させないようにする
- jQuery プラグイン jquery.balloon.js に jQuery UI を追加してバルーン毎に違ったアニメーション効果を設定する
- jquery.balloon.js で、balloon をメッセージ表示に使う( ゲーム等で使う為 )
- jQuery プラグイン jquery.balloon.js で複数バルーンにそれぞれ別のコンテンツを設定する為には、.each を使う
- jQuery プラグイン jquery.balloon.js を使用する『画像バルーン』の処理 (Excel で作成した吹き出し)
- jQuery プラグイン jquery.balloon.js の外部からのコントロール
- NAVER : Image*After の城と教会編
- 親(parent) フレームに jQuery が無い場合に jQuery をインストールする。
- jQuery で書かれた、幻想的な動く星座のようなシーン
- jQuery の addClass で、CSS で作成するサイフの出来上がる過程を見れるようにしました
- jQuery/JavaScript でフルスクリーンAPI( スクロールしないし、こりゃあ、WebGL の為にあるような・・・ )
- CSS transition : jQuery の addClass と removeClass で変化を付ければいい。いや、これが一番よさそうだ。
