개념정리(CSS) - 컨텐츠 요소를 가운데 오게 하는 방법

코딩을 하면서 느낀부분은 물론 기본 뼈대를 잘 작성을 해놔야 나중에 CSS로 꾸미더라도 코드가 꼬이지 않고 편한 것 같다. 또, 원하는 위치,크기에 맞게 정렬해야 할 경우가 많은 것 같아서 이부분도 별도로 개념을 정리하고 여러가지 방법을 알고 있는게 좋을 것 같다.(코딩에는 정답이 없다고하니!!)

 

① flex를 이용하는 방법

 

HTML

<div class="center">      <span>Center</span> </div>

CSS

.center {     display :flex; align-items : center;     justify-content : center;      height :100vh; } .center span {     display : inline-block;     width : 100px; height : 100px;     background-color : #fff;      border-radius : 50%;      text-align : center;     line-height : 100px ; color : #000;  }

display 를 flex 로 설정하고 align-items과 justify-content를 설정하면 가운데로 설정 가능하다!

※ flex 를 사용하면 영역이 사라지지 않고 유지되기 때문에 코딩 작업시 편리하다.

 

② 포지션을 이용하는 방법 

 

CSS

.center {     position : relative; height : 100vh; } .center span {     position : absolute;     left : 0; top : 0; right : 0; bottom : 0;     margin : auto; display : inline-block;     width : 100px; height : 100px;      background-color : #fff;      border-radius : 50%;      text-align : center ;     line-height : 100px; color : #000; }

포지션으로 가운데 정렬을 하는경우, 영역이 사라지는 단점이 있다.

또한, left : 50% ; top:50% , transform : translate(-50%, -50%); width : 100px; height : 100px; 로도 가운데 정렬이 가능하지만 이방법도 동일하게 영역이 사라지는 단점이 있다. 

 

③ 테이블 구조를 이용하는 방법

 

HTML

<div class="center">       <span><em>Center</em></span> </div>

CSS

.center {     display : table; width : 100vh; height : 100vh } .center span {      display : table-cell; text-align : center;      vertical-align:middle;  } .center span em {      width : 100px; height : 100px;      background-color : #fff;      border-radius : 50%; text-align : center;      line-height : 100px; color : #000;       display : inline-block;  }

테이블 구조로도 컨텐츠 가운데 정렬이 가능하지만, 구조가 복잡하기떄문에 잘 사용하지는 않는다고한다.

 

④ 블록요소를 가운데 오게하는 방법 

 

블록요소 양쪽에 auto값을 주면 가운데 정렬이 가능하다. 

margin : 0 auto; 라고 하면은 위 아래는 0을 주고 양쪽은 auto로 준다는 의미 (auto는 자동값 or 기본값을 뜻함)

 

⑤ 인라인 요소를 가운데 오게하는 방법

height값 과 line-height값을 동시에 사용하면 가운데 오게할 수 있다. 

(단, 한줄일경우에만 사용이 가능)

활용성이 떨어지기때문에 자주 사용하는 방법은 아니다.