웹사이트 엘레먼트를 CSS 사용해서 가운데 정렬하는 5가지 방법

안녕하세요. 혀코입니다.

 

이번 시간에는 웹사이트 엘레먼트를 CSS 사용해서 가운데 정렬하는 방법 5가지에 대해서 알아보겠습니다.

 

1. CSS position을 사용해서 중앙정렬 하는 방법

 

.parent {
    width: 500px;
    height: 500px;
    position: relative;
    background-color: grey;
}

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

 

부모 엘레먼트에 position: relative 값을 줘서 자식 엘레먼트에서 absolute 값을 줬을시 초기값을 부모 엘레먼트 기준으로 설정합니다.

top과 left를 각 각 50% 이동하는데 이때 왼쪽 상단 모서리가 중앙에 위치하기 때문에 자식 엘레먼트의 가로 세로의 길이의 반 만큼 이동해줘야 자식 엘레먼트가 부모 엘레먼트 기준 중앙에 위치할 수 있습니다.

 

 

2. table-cell을 사용해서 중앙정렬 하는 방법

 

.parent {
    width: 500px;
    height: 500px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    background-color: grey;
}

.child {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: orange;
}

 

부모 엘레먼트를 테이블로 설정하고 자식 엘레먼트도 인라인 블록으로 설정하면 div 엘레먼트를 중앙 정렬 할 수 있습니다.

 

 

3. grid를 사용해서 중앙정렬 하는 방법

 

.parent {
    width: 500px;
    height: 500px;
    display: grid;
    place-items: center;
    background-color: grey;
}

.child {
    width: 50px;
    height: 50px;
    background-color: orange;
}

 

부모 엘레먼트에서 display 값을 grid로, place-items를 center로 설정하면 자식 엘레먼트를 중앙 정렬 할 수 있습니다.

 

 

4. flex와 margin을 사용해서 중앙정렬 하는 방법

 

.parent {
    width: 500px;
    height: 500px;
    display: flex;
    background-color: grey;
}

.child {
    width: 50px;
    height: 50px;
    margin: auto;
    background-color: orange;
}

 

부모 엘레먼트에 display 값을 flex로, 자식 엘레먼트에 margin 값을 auto로 설정하면 자식 엘레먼트가 중앙값을  가질 수 있습니다.

 

 

5. flex를 사용해서 중앙정렬 하는 방법

 

.parent {
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: grey;
}

.child {
    width: 50px;
    height: 50px;
    background-color: orange;
}

 

이 방법은 제가 제일 많이 사용하는 방법입니다. 부모 엘레먼트에 display 값을 flex로 설정하고 justify-content와 align-items를 center로 설정하면 자식 엘레먼트가 부모 엘레먼트 기준으로 중앙 정렬할 수 있습니다.

 

코드를 실행시키면 다음과 같은 결과물을 확인하실 수 있습니다.

 

 

제가 추천하는 방법은 5번째 flex를 사용해서 가운데 정렬 하는 방법을 추천 드립니다.

 

이렇게 웹사이트 엘리먼트를 CSS 사용해서 중앙정렬하는 방법 5가지에 대해서 알아봤습니다.

 

해당 정보가 유용하셨다면, 공감과 구독 부탁 드립니다.

 

감사합니다. :)