[JAY⌨️CSS] 요소를 가로, 세로 중앙 정렬 하는 방법 모음!

 

 

 

 1️⃣ Transform : translate()

1. 가운데 정렬하고 싶은 요소의 부모 요소에 position : relative 속성을 주고 기준을 생성.
2. 가운데 정렬하고 싶은 요소에 position : absolute 속성을 주고 left, top 50%, 50%씩 이동시켜 중앙으로 이동.
3. position을 통해 이동시킬 때 요소의 width, height 값을 포함해서 이동하기 때문에 transform: translate(-50%, -50%);
   값을 추가하면 요소의 width, height 값의 -50% 만큼 다시 되돌려서 배치되어 상하좌우 중앙 정렬 완성!
4. 요소 크기에 대한 transform 값을 퍼센티지로 주기 때문에 유지보수에 용이해서 가장 보편적으로 사용하는 방법.

<div class="parent">
    <div class="children translate">
    	<!-- Contents -->
    </div>
</div>

.parent {
	/* 부모 요소에 relative를 주고 기준 생성 */
    position: relative;
}

.children {
	/* 자식 요소에 absolute를 주고 상하 50%씩 배치 */
    position: absolute;
    top: 50%;
    left: 50%;
}


/* 💡 Solution 01 | Transform : translate() */
.translate {
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Transform : translate() 속성을 이용한 중앙 정렬

 

 

 

 

 

 2️⃣ Negative Margin

1. 가운데 정렬하고 싶은 요소의 부모 요소에 position : relative 속성을 주고 기준을 생성.
2. 가운데 정렬하고 싶은 요소에 position : absolute 속성을 주고 left, top 50%, 50%씩 이동시켜 중앙으로 이동.
3. position을 통해 이동시킬 때 요소의 width, height 값을 포함해서 이동하기 때문에 음수로 margin 값을 추가하면 요소의 width, height 값의 -50% 만큼 다시 되돌려서 배치되어 상하좌우 중앙 정렬 완성!
4. 간단한 방법이지만 값을 고정으로 주어야 하기 때문에 유지보수시 주의.

<div class="parent">
    <div class="children negativeMargin">
    	<!-- Contents -->
    </div>
</div>

.parent {
	/* 부모 요소에 relative를 주고 기준 생성 */
    position: relative;
}

.children {
	/* 자식 요소에 absolute를 주고 상하 50%씩 배치 */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 200px;
}


/* 💡 Solution 02 | negative Margin = width의 2/1 px */
.negativeMargin {
	/* 요소의 2/1 크기만큼 음수값 지정 */
    margin-left: -200px;  
    margin-top: -100px;
}

Negative Margin = width의 2/1 px 을 통한 중앙 정렬

 

 

 

 

 

3️⃣ inset 속성과 Margin auto

1. 가운데 정렬하고 싶은 요소의 부모 요소에 position : relative 속성을 주고 기준을 생성.
2. 가운데 정렬하고 싶은 요소에 position : absolute 속성을 주고left, right, top, bottom 각각 0씩 값을 주면 좌, 우로 늘어나서 꽉 차는 형태가 된다. 이때 margin:auto 를 주면 상하와 좌우에 동일한 비율의 margin 값이 부여되므로 상하좌우 중앙 정렬 완성!
3. left: 0; right: 0; top: 0; bottom:0; 값 은 inset : 0 이라는 단축 속성으로 동일하게 사용할 수 있다.
4. inset이라는 새로운 속성으로 고정값 없이 구현할 수 있어서 Ngative Margin 보다 유지보수에 용이한 방법!

<div class="parent">
    <div class="children inset">
    	<!-- Contents -->
    </div>
</div>

.parent {
	/* 부모 요소에 relative를 주고 기준 생성 */
    position: relative;
}

.children {
	/* 자식 요소에 absolute */
    position: absolute;
}


/* 💡 Solution 03 | inset + Margin auto */
.inset {
    /* inset = left:0, right:0; top:0; right:0 의 단축속성*/
    inset: 0;
    /* 컨텐츠를 다쓰는 상태가 되서 남는 공간에 margin:auto 사용 가능 */
    margin: auto;
}

inset 속성과 Margin auto 를 통한 중앙 정렬