eatthefrog

CSS) 자식박스를 가운데 정렬시키기 위해서 부모 박스에 flex box 설정하는 이유 본문

프론트엔드 노트

CSS) 자식박스를 가운데 정렬시키기 위해서 부모 박스에 flex box 설정하는 이유

eater_forg 2025. 1. 1. 13:27

 

 

코드 참조 

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .inner {
        width: 50px;
        height: 50px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <h1>flex box</h1>
    <div class="box">
      <div class="inner"></div>
    </div>
  </body>
</html>

 

 

 

이유:

  1. display: flex로 부모 박스가 Flex 컨테이너가 됨
    • display: flex는 부모 박스를 Flex 컨테이너로 만들어 내부의 자식 요소(.inner)를 정렬할 수 있는 기능을 활성화합니다.
  2. justify-content로 수평 정렬 제어
    • justify-content: center는 Flex 컨테이너 내부에서 자식 요소를 수평 중심으로 정렬합니다.
    • 수평으로 자식 요소가 정확히 가운데 위치하도록 설정됩니다.
  3. align-items로 수직 정렬 제어
    • align-items: center는 Flex 컨테이너 내부에서 자식 요소를 수직 중심으로 정렬합니다.
    • 수직 방향에서도 자식 요소가 정확히 가운데 위치하게 됩니다.

 

 

Flexbox의 장점

  • 코드가 간결: 다른 방법(예: margin, position, transform)에 비해 코드를 단순하게 작성할 수 있습니다.
  • 반응형 디자인에 유리: 화면 크기나 부모 박스의 크기가 변하더라도 자식 요소는 여전히 정렬 상태를 유지합니다.
  • 조합 가능: 수평/수직뿐 아니라 여러 정렬 방식(예: space-between, flex-end)을 조합하여 유연한 레이아웃을 만들 수 있습니다.

 

대안 방법과 비교

예를 들어, position을 활용한 정렬 방식은 아래와 같습니다:

1. 부모 박스를 relative로 설정

2. 자식 박스를 부모박스의 반지름만큼 대각선으로 이동 => 꼭짓점이 부모박스의 중심을 찍게 됨

3. 자식 박스 반지름만큼 다시 대각선으로 백 => 자식 박스의 중심과, 부모 박스의 중심이 일치하게됨

=> 부모 박스가 flex 컨테이너가 되어 자식 요소를 수평,수직 정렬하는 속성을 사용하는게 더 직관적이다. 

.box {
  position: relative;
}
.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

 

'프론트엔드 노트' 카테고리의 다른 글

모던 자바스크립트_Module Pattern(import,export)  (1) 2025.01.02
모던 자바스크립트 모듈 Top-Level await (ES2022)  (0) 2025.01.02
모던 자바스크립트_ES6 모듈 VS 스크립트 2탄(파일로딩,다운로드)  (1) 2024.12.31
모던 자바스크립트 모듈  (0) 2024.12.31
모던 자바스크립트 모듈,클래스,함수 정리  (0) 2024.12.31
'프론트엔드 노트' Related Articles more