画面の中央にレイヤーを表示する - 絶対座標を指定してレイヤーを表示する - CSS
HTMLにてダイアログ風の画面を作成したい場合など、画面の中央にレイヤーを表示したいことがあります。この記事では絶対座標を指定してレイヤーを表示するコードを紹介します。
コード
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="ScreenCenterLayer.css" />
<title></title>
</head>
<body>
<div id="DialogFrame">画面の中心に表示されるレイヤーです。</div>
</body>
</html>
body {
background-image:URL("img/back.jpg");
margin:0px 0px 0px 0px;
}
#DialogFrame {
position:absolute;
top:50%;
left:50%;
margin-left:-160px; /*widthの半分にする*/
margin-top:-100px;/*heightの半分にする*/
padding-left:8px;
padding-right:8px;
padding-top:8px;
border:5px solid #E0E0E0;
width:320px;
height:200px;
background-color:#FFFFFF;
z-index:2;
}
解説
HTMLファイルはdiv枠を1つ表示する単純なHTMLファイルです。
CSSでは以下の指定により、画面の中央に枠を表示します。
top:50%;
left:50%;
ただしこのままでは画面の中央が枠の左上座標になるため、
以下のコードでmarginに負の値を指定し、表示位置を左上方向にずらして表示することで画面の中央に枠を表示します。
margin-left:-160px; /*widthの半分にする*/
margin-top:-100px;/*heightの半分にする*/
実行結果
HTMLファイルをWebブラウザで開きます。下図の画面が表示されます。
ウィンドウのサイズを変更しても枠は中央に表示されます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
