연습장

21. Horizontal & Vertical Centering 수평/수직 중앙 정렬 본문

CSS3

21. Horizontal & Vertical Centering 수평/수직 중앙 정렬

js0616 2024. 7. 1. 03:48

https://poiemaweb.com/css3-centering

 

CSS3 Horizontal & Vertical Centering | PoiemaWeb

CSS를 사용한 HTML 요소의 수평/수직 중앙 정렬 (Horizontal & Vertical Centering)

poiemaweb.com

 

 

 

1. 수평 정렬(Horizontal Align)

 

1.1 inline/inline-block 요소
정렬 대상 요소(텍스트 또는 링크 등의 inline 레벨 요소 또는 inline-block 레벨 요소)의 부모 요소에 text-align: center;를 지정한다.

 

1.2 block 요소
정렬 대상 요소에 너비를 명시적으로 지정하고 margin-right와 margin-left 프로퍼티에 auto를 지정한다.
정렬 대상 요소에 너비를 명시적으로 지정하지 않으면 너비는 full width가 되므로 중앙 정렬이 필요없다.

    .text {
      text-align: center;
    }
    .block {
      width: 200px;
      background-color: lightgray;
      margin: 20px auto;
    }
 

 

 

1.3 복수의 block 요소
복수의 block 요소는 기본적으로 수직 정렬된다. 이것을 수평정렬하기 위해서는 정렬 대상 block 요소를 inline-block 요소로 변경한 후 부모 요소에 text-align: center;를 지정한다.

정렬 대상 요소에 width를 지정하지 않으면 콘텐츠에 너비에 맞추어 너비가 결정되므로 명시적으로 너비를 지정한다.

 

1.4 Flexbox
flexbox를 사용할 수도 있다. 정렬 대상의 부모 요소에 아래의 룰셋을 선언한다.

 
    .wrap{
      display: flex;
      justify-content: center;
    }

 

 

 

2. 수직 정렬(Vertical Align)

 

2.1 inline/inline-block 요소

 

2.1.1 Single line 한줄 정렬
- 정렬 대상의 부모 요소에 padding-top과 padding-bottom 프로퍼티값을 동일하게 적용

- 요소의 height와 line-height 프로퍼티값을 동일하게 적용

 

2.1.2 Multiple lines 여러줄 정렬
- padding-top과 padding-bottom 프로퍼티값을 동일하게 적용
- vertical-align 프로퍼티를 사용. 단, table 속성을 사용하여야 한다.

 

    .parent {
      display: table;
      height: 500px;
      background-color: gray;
      width: 300px;
    }
    .child {
      display: table-cell;
      vertical-align: middle;
    }

 

2.1.3 Flexbox

    .flex-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 400px;
    }

 

 

2.2 block 요소
2.2.1 요소의 높이가 고정되어 있는 경우
부모 요소를 기준으로 절대 위치를 지정한다.

 

.parent {
    position: relative;
  }
  .child {
    position: absolute;
    top: 50%;
    height: 100px;
    /*요소의 높이(100px)의 반 만큼 위로 이동*/
    margin-top: -50px;
  }

 

2.2.2 요소의 높이가 불확정 상태의 경우
부모 요소를 기준으로 절대 위치를 지정한다.

 

.parent {
    position: relative;
  }
  .child {
    position: absolute;
    top: 50%;
    /*요소의 높이의 반(50%) 만큼 위로 이동*/
    transform: translateY(-50%);
  }

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .parent{
      width: 20%;
      height: 200px;
      background-color: lightgray;
      position: relative;
    }

    .child {
      display: block;
      position: absolute;
      background-color: black;
      color: white;
      width: 100px;
     
      top : 50%;
      height: 150px;
      margin-top: -75px;

      display: flex;
      align-items: center;
    }
    .child2{
      background-color: gray;
      color: white;
      width: 100px;
      position: absolute;
      left:200px;

      top:50%;
      transform: translateY(-50%);
    }


  </style>
</head>
<body>
  <div class="parent">
    <div class="child">block 요소 높이 고정</div>
    <div class="child2">block 요소 높이 모름</div>
  </div>
 
</body>
</html>

 

 

 

2.2.3 Flexbox
부모 요소에 Flexbox layout을 지정한다.

 

.parent {
    display: flex;
    /*위에서 아래로 수직 배치*/
    flex-direction: column;
    /*중앙정렬*/
    justify-content: center;
  }

 

 

 

3. 수평/수직 정렬(Horizontal & Vertical Align)
요소의 너비와 높이가 고정되어 있는 경우, 요소의 너비와 높이가 불확정 상태의 경우 모두 사용 가능한 방법이다

 

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  /*요소의 높이/너비의 반(50%)만큼 위/왼쪽으로 이동*/
  transform: translate(-50%, -50%);
}

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
  }

 

'CSS3' 카테고리의 다른 글

22. Typographyimage 요소 아래에 패딩된 여분의 공간 제거하기  (0) 2024.07.01
20. Flexbox Layout 플렉스 박스 레이아웃  (1) 2024.07.01
19. Responsive Web Design 반응형 레이아웃  (1) 2024.06.30
18. Layout 레이아웃 float  (0) 2024.06.30
17. Web Font 웹디자인 타이포그래피(Typography)  (0) 2024.06.29
'CSS3' Related Articles more