CSS Box 정 가운데 정렬하기

Box 정 가운데 정렬하기

 

1. position

- 요소들을 배치하는 속성

- top, left, bottom, right 으로 위치 지정 가능

 

- relative : 자신을 기준으로 위치 지정, 다른 요소에 영향을 주지 않고 자신만 움직임.

- absolute : relative 된 부모 속성을 기준으로 위치 지정

- fixed : 위치 고정, 헤더를 고정할 경우 헤더 바로 아래 요소를 헤더 높이만큼 마진으로 아래로 이동시켜줘야 겹치는 부분이 생기지 않음

- static : 기본값, 지정해준 position 속성값을 초기화 시켜줌

.wrap{
	width: 200px;
	height: 200px;
	border: 1px solid black;
	position: relative;
}

.wrap{
	width: 200px;
	height: 200px;
	border: 1px solid black;
	position: relative;
	left: 50px;
}

 

 

2. 요소 가운데 정렬하기

margin: 0 auto;

→ 좌우를 auto로 지정해주면 브라우저 크기를 늘리거나 줄여도 좌우 마진이 자동으로 지정되어 가운데 정렬 됨

 

position: absolute;

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

→ top, left 값만 지정해주면 정 가운데 위치하지 않음

→ 박스의 제일 윗부분, 왼쪽부분을 기준으로 정렬하는 것이기 때문에 trasform 으로 박스의 크기만큼의 위치를 마이너스 값으로 움직여줘야 한다.

 

<div class="wrap">
	<div class="box"></div>
</div>

.wrap{
	width: 500px;
	height: 500px;
	margin: 0 auto;
	border: 1px solid black;
	position: relative;
}

.box{
	background-color: pink;
	width: 150px;
	height: 150px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

 

 

3. 콘텐츠 박스 비율로 잡기

- 코드를 단순화하기 위해 공통적인 부분을 클래스(row, col)로 지정하고, 변경할 부분만 별도의 클래스(col_1, col_2, col_3)를 지정해서 속성 변경하기

<div class="wrap">

    <div class="row">
	    <div class="col col_1">콘텐츠박스</div>
    </div>

    <div class="row">
    	<div class="col col_2">콘텐츠박스</div>
    	<div class="col col_2">콘텐츠박스</div>
    </div>
    		
    <div class="row">
    	<div class="col col_3">콘텐츠박스</div>
    	<div class="col col_3">콘텐츠박스</div>
    	<div class="col col_3">콘텐츠박스</div>
    </div>

</div>

.wrap{
	width: 1000px;
	margin: 0 auto;
}
		
.row{
	width: 100%;
}
		
.col{
	height: 150px;
	padding: 25px; /* 패딩을 주게 되면 원래의 크기보다 박스가 넘치게 됨. */
	box-sizing: border-box; /* 현재 박스 크기 안에서 패딩이 주어질 수 있게 해줌*/
	float: left;
	margin-bottom: 25px;
	background-color: pink;
	border: 1px solid black;
}
		
.col_1{
	width: 100%; /* 콘텐츠 박스가 1개일 때 */
}

.col_2{
	width: 50%; /* 콘텐츠 박스가 2개일 때 */
}

.col_3{
	width: 33.33%; /* 콘텐츠 박스가 3개일 때 */
}