레이아웃 가운데 정렬방법
1. margin:auto
2. position:absolute;
3. text-align:center;
1.margin:auto로 간단히 가운데 정렬하기.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css 가운데 정렬</title> <style type="text/css"> body{ margin:0; padding:0; } #box { width:980px; height:2000px; margin:0 auto; background:#0CF;} </style> </head> <body> <div id="box"> 레이아웃</div> </body> </html> 결과  |
2.position:absolute;로 가운데 정렬
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css 가운데 정렬</title> <style type="text/css"> body{ margin:0; padding:0; } #box { position:absolute; top:0; left:50%; width:980px; height:2000px; margin-left:-500px; background:#0CF;} </style> </head> <body> <div id="box"> 레이아웃</div> </body> </html> 결과  이럴경우 지정한 width의 /2의 값을 margin-left로 마이너스값을 줌. 그렇기 때문에 margin-left:-500px을 넣어줌. |
3. 잘 사용하진 않지만 text-align:center;로 가운데 정렬하기
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css 가운데 정렬</title> <style type="text/css"> body{ margin:0; padding:0; text-align:center; } #box { width:980px; height:2000px; background:#0CF;} </style> </head> <body> <div id="box">레이아웃</div> </body> </html> 결과  잘 사용되지 않음. |
