hanker

CSS - 요소 중앙 정렬하는 방법 (수직 / 수평 정렬) 본문

HTML/CSS

CSS - 요소 중앙 정렬하는 방법 (수직 / 수평 정렬)

hanker 2024. 11. 18. 08:41
반응형

HTML에서 요소를 중앙 정렬하는 방법은 여러가지가 있다.
수직 또는 수평 정렬을 어떻게 구현할지에 따라 다른 접근 방식을 취한다.
 
 

1. Flexbox 사용

 

부모 요소에 스타일을 설정하여 자식 요소를 수평과 수직 모두 중앙에 배치한다.

.parent {
      display: flex;
      align-items: center;
      justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .parent {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200px;
      border: 1px solid black;
    }
    .child {
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">중앙</div>
  </div>
</body>
</html>

이 방식은 간단하게 부모 요소의 속성만 조정하여 자식 요소를 중앙으로 배치할 수 있어 매우 직관적이다.
 
 
 

반응형

 

2. Grid 사용

 

1번과 마찬가지로 부모 요소에 스타일을 설정하여 자식 요소를 중앙 정렬 시킨다.

.parent {
    display: grid;
    place-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .parent {
      display: grid;
      place-items: center;
      height: 200px;
      border: 1px solid black;
    }
    .child {
      width: 100px;
      height: 100px;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">중앙</div>
  </div>
</body>
</html>

CSS Grid는 두 축(수평 및 수직)을 동시에 제어할 수 있어 복잡한 레이아웃에서 유용하게 사용된다.
 
 
 
 

3. Absolute와 Transform 사용

 

자식 요소에 스타일을 설정하여 화면의 중앙에 배치한다.
 

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .parent {
      position: relative;
      height: 200px;
      border: 1px solid black;
    }
    .child {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100px;
      height: 100px;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">중앙</div>
  </div>
</body>
</html>

이 방식은 요소를 부모 기준으로 정확히 중앙에 배치할 때 유용하다. 특히 고정된 위치의 요소를 중앙에 두고 싶을 때 효과적이다.
 
 
 
 
끝.

반응형

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

CSS - 마우스 커서(cursor) 변경  (0) 2021.02.01
CSS - textbox css 적용해서 꾸미기  (0) 2020.09.01
'HTML/CSS' Related Articles more