가로 세로(수평 수직) 중앙정렬 - top, left, transform
카테고리 없음2021. 1. 6. 16:12
div 등의 요소를 페이지의 가로 세로(수평 수직) 중앙정렬 하기
사용 CSS Property : top, left, transform ( translate )
01. transform을 이용
css
/* CSS */
body {max-width:100%; max-height:100%; margin:0; padding:0; background-color:#7166ff;}
#wrapper {
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
.container {background-color:#7166ff; color:#ffffff; font-family:'Tangerine', cursive, tahoma, verdana; font-size:35px; letter-spacing: 1px; text-align: center; }
.container > span {font-family: 'Cabin', sans-serif; font-size: 14px;}
.container a {text-decoration: none; color:#fff;}
.content {color:#ffffff; font-family:'Marvel', sans-serif, 'Tangerine', cursive, tahoma, verdana; font-size:36px; letter-spacing: 0px; text-align: center; }
HTML
/* HTML */
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>page center array</title>
<link href="https://fonts.googleapis.com/css?family=Tangerine" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Marvel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div class="container">
<a href="http://forExample.wooin21.net/" target="_blank">http://forExample.wooin21.net/</a><br>
<span>powered by</span> <img src="WI_orangeNletter_logo.svg" width="80" height="19">
</div>
<div class="content">
"Code is Poetry!"
</div>
</div>
</body>
</html>
02. minus margin을 이용
css
/* CSS */
body {
max-width:100%; max-height:100%; margin:0;padding:0; background-color:#7166ff;
}
#wrapper {
top: 50%; left: 50%; position: absolute;
}
.container {
background-color:#7166ff; color:#ffffff;
font-family:'Tangerine', cursive, tahoma, verdana; font-size:35px;
letter-spacing: 1px; text-align: center;
/* margin을 이용 */
width:300px; height: 76px; margin-top: -38px; margin-left: -150px;
}
.container > span {font-family: 'Cabin', sans-serif; font-size: 14px;}
.container a {text-decoration: none; color:#fff;}☞ 예제 페이지 보기 : [ GO ]
