공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/CSS

div 가로 세로정렬하기

serpiko 2015. 4. 14. 10:51

   DIV의 수평정렬


div안에 포함되어 있는 텍스트를 수평중앙정렬 하기 위해서는 text-align: center; 스타일을 지정해 준다.


div안에 포함되어 있는 display가 block인 요소들을 수평중앙정렬 하기 위해서는 다음과 같이 margin좌우에 auto로 지정해 준다.


margin:0 auto 0;
margin:0 auto;
margin-left:auto; margin-right:auto;



   DIV의 세로 정렬


Table 엘리먼트에서 vertical-align: middle; 로 수직중앙정렬 했지만 div에서는 적용 되지 않는다.


우리는 div의 display를 직접 table속성으로 확장,변경해 주고 수직으로 정렬하는 방법을 알아보겠다.


<!DOCTYPE html>
<html lang="en">
<head>
	<!-- meta -->
	<meta name="Author" content="serpiko@hanmail.net" />
	<meta name="description" content="http://serpiko.tistory.com" />

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	
	<!-- link -->
	<link rel="stylesheet" type="text/css" href="" />
	<link rel="shortcut icon" href="" />

	<!-- script -->
	<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
	<title>Document</title>
	<style>
		* {
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
		}
		#container_table{
                        width:100%;height:100%;
			position:absolute;
			display:table;
			left:0; top:0;
			background-color: #22262c;
		}
		#table_cell{
			display:table-cell;
			vertical-align: middle;
		}
		#window{
			position:relative;
			text-align: center;
			width:400px; height:auto;
			margin-left:auto; margin-right:auto;
			color: #FFF;
		}
	</style>
</head>
<body>
	<div id="container_table">
		<div id='table_cell'>
			<div id='window'>
				가로 세로 센터
			</div>
		</div>
	</div>

	<script>
		$(document).ready(function(){

			/* --------------------------------------------------------
				descr 
			-----------------------------------------------------------*/
			(function(){
				console.log('say hello');
			})();
		});
	</script>
</body>
</html>






   DIV나 TABLE 등 고전적인 방법( 수치계산 )


<!DOCTYPE html>
<html lang="en">
<head>
	<!-- meta -->
	<meta name="Author" content="serpiko@hanmail.net" />
	<meta name="description" content="http://serpiko.tistory.com" />

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	
	<!-- link -->
	<link rel="stylesheet" type="text/css" href="" />
	<link rel="shortcut icon" href="" />

	<!-- script -->
	<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
	<title>Document</title>
	<style type="text/css"> 
	body { 
		margin:0; 
	} 
	#wrap { 
		width:300px; 
		height:200px; 
		background-color:#CCCCCC; 
		position:absolute; 
		top:50%; 
		left:50%; 
		margin-top:-100px; 
		margin-left:-150px; 
	} 
</style> 

</head> 
<body> 

	<div id="wrap">300x200 (margin-top:-100px, margin-left:-150px)</div> 

</body> 
</html>

저작자표시 비영리 동일조건

'■ 프론트엔드 ■ > CSS' 카테고리의 다른 글

transition 속성 애니메이션 조절  (0) 2015.08.21
웹폰트 - 나눔고딕  (0) 2015.07.06
text-shadow : 텍스트 효과  (0) 2015.04.08
img와 텍스트 세로정렬 하기 - Vertically align text next to an image  (0) 2015.03.09
Set cellpadding and cellspacing in CSS?  (0) 2014.12.03
댓글