[CSS] element 중앙 정렬 방법(div, button 태그)

element 중앙(가운데) 정렬 하는 법

element를 중앙 정렬하는 기본적인 방법은 element의 width 를 설정해주고 margin을 auto로 설정하여 왼쪽과 오른쪽의 margin을 같게 설정해주는 것이다.

element의 width 설정
element의 margin을 auto로 설정(왼쪽 오른쪽 margin이 같게)

예제를 통해 확인해보겠다.

예제 – div / H1 / button 태그를 중앙 정렬하기 (하단 왼쪽 이미지에서 오른쪽 이미지처럼)

순서:

초록색 div를 브라우저의 중앙으로 배치
초록색 div 내 H1 태그(contact)를 div의 중앙으로 배치
초록색 div 내 Button 태그(완료)를 div의 중앙으로 배치

중앙 정렬 전 HTML 코드

<div id="wrapper" style="background-color:green;">
    <h1 id="txtContact"> Contact </h1>
    <button type="submit" id="btnSubmit" > 완료 </button>
</div>

1. 초록색 div를 브라우저의 중앙으로 배치

초록색으로 칠해진 div 태그(id:wrapper)에 width를 설정하고 margin을 auto로 지정한다. 그러면 div 태그가 웹 브라우저의 중앙에 배치된다.

<style>
    #wrapper{
        width:300px;
        margin:auto;
    }
</style>

2. 초록색 div 내 H1 태그(contact)를 div의 중앙으로 배치

Contact text (id: txtContact)의 width를 지정하고, margin을 auto로 설정하면 div 태그의 가운데로 정렬된다.

<style>
    #wrapper{
        width:300px;
        margin:auto;
    }

    #txtContact{
        width:fit-content;
        margin:auto;
    }
</style>

3. 초록색 div 내 Button 태그(완료)를 div의 중앙으로 배치

완료 버튼 (id: btnSubmit)의 width를 지정하고, margin을 auto로 설정하면 div 태그의 가운데로 정렬되지 않는다! button의 경우 display:block 까지 지정해주어야 한다.

<style>
    #wrapper{
        width:300px;
        margin:auto;
    }

    #txtContact{
        width:fit-content;
        margin:auto;
    }

    #btnSubmit{
        width:100px;
        margin:auto;
        display:block;
    }
</style>