[CSS 기초] 엘리먼트 수직, 수평 중앙 정렬하기 (vertical align, flex, text-align, position...)

🔷 수직 정렬 방법

( 인라인 요소, 블록 요소 동일하게 적용됨 )

수직정렬 시키는 요소의 부모 요소에 높이를 준다. (padding 줘도 ok)

🔹 vertical-allign, display 이용

부모 요소에 vertical-allign: middle; display: table-cell;

<!--스타일코드 생략-->
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>수직수평 정렬</title>
  <style>
    .parent {
      vertical-align: middle;
      display: table-cell;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">수직 중앙 정렬</div>
  </div>
</body>
</html>

- 결과

vertical-align은 원래 block 요소에 적용할 수 없으나,

block 요소의 내부 요소는 적용이 가능합니다.

🔹 flex 활용

(1) align-items: center 이용

정렬시킬 요소의 부모 요소에 display: flex; align-items: center;

<!--스타일코드 생략-->
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>수직수평 정렬</title>
  <style>
    .parent {
      display: flex;
      align-items: center;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">수직 중앙 정렬</div>
    <div class="child">수직 중앙 정렬</div>
  </div>
</body>
</html>

- 결과

(2) flex-direction, justify-content 이용

정렬시킬 요소의 부모요소에 display: flex; flex-direction: column; justify-content: center;

<!--스타일코드 생략-->
<html lang="ko">
<head>
  <title>수직수평 정렬</title>
  <style>
    .parent {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">수직 중앙 정렬</div>
    <div class="child">수직 중앙 정렬</div>
  </div>
</body>
</html>

- 결과

align-items와 다른 점은 주축이 y축으로 바뀝니다.

flex와 자세히 다루도록 하겠습니다.

🔷 수평 정렬 방법

🔹 block 요소 수평 정렬

margin: 0 auto;

블록 요소를 수평 가운데로 정렬.

정렬 해줘야하는 요소에 작성.

<!--스타일코드 생략-->
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>수직수평 정렬</title>
  <style>
    .child {
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">수직 중앙 정렬</div>
  </div>
</body>
</html>

- 결과

상하단 margin은 0, 좌우 margin은 auto가 된다는 의미.

좌우 마진값이 auto가 되면서 좌우 마진 값을 똑같이 맞춰지고 중앙 정렬이 된다.

🔹 inline 요소 수평 정렬

text-align: center;

인라인 요소를 가운데로 정렬

정렬해줘야하는 요소의 부모 요소에 작성.

<!--스타일코드 생략-->
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>수직수평 정렬</title>
  <style>
    .parent {
      width: 200px;
      height:200px;
      border: 1px solid red;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">수직 중앙 정렬</div>
    <span>인라인요소</span>
  </div>   
</body>
</html>

- 결과

블록요소인 div에는 적용되지않고

인라인요소 span에만 중앙 정렬이 적용된 것을 볼 수 있다.

🔷 정중앙 위치시키기

🔹 position, transform 이용

position: absolute; left: 0; top: 0; transforom: translate(-50%, -50%);

<!--스타일코드 생략-->
<html lang="ko">
<head>
  <title>수직수평 정렬</title>
  <style>
    .parent {
      position: relative;
    }
    
    .child {
      position: absolute; 
      left: 50%; 
      top: 50%; 
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">중앙 정렬</div>
  </div>   
</body>
</html>

- 결과

부모 요소에는 position: relative 설정 해줘야함.

'Programming > CSS' 카테고리의 다른 글

[CSS 기초] 포지셔닝 : position (position: relative vs position: absolute / position: fixed vs position: sticky) (0)	2021.11.08
[CSS 기초] 엘리먼트 배치: float + clear: both, overflow: hidden (0)	2021.11.07
[CSS 기초] 박스모델 Box Model (margin, padding, border) (0)	2021.11.02
[CSS 기초] 블록 요소(block element) vs 인라인 요소(inline element) vs 인라인 블록 요소 (inline-block element) (0)	2021.11.02
[CSS 기초] CSS background 배경을 제어하는 속성 (0)	2021.11.01

🔷 수직 정렬 방법

🔹 vertical-allign, display 이용

🔹 flex 활용

(1) align-items: center 이용

(2) flex-direction, justify-content 이용

🔷 수평 정렬 방법

🔹 block 요소 수평 정렬

margin: 0 auto;

🔹 inline 요소 수평 정렬

text-align: center;

🔷 정중앙 위치시키기

🔹 position, transform 이용

'Programming > CSS' 카테고리의 다른 글

티스토리툴바