CSS에서 요소를 중앙에 배치하는 3가지 방법

웹 개발자는 일상 생활에서 요소를 중앙에 배치해야 하는 경우를 많이 접하게 됩니다. 또한 면접에서 묻는 매우 일반적이고 중요한 개념입니다. 그래서 오늘 저는 CSS를 사용하여 사물을 중앙에 배치하는 제가 가장 좋아하는 세 가지 방법을 나열하고 싶습니다.



하나는 다른 하나 안에 두 개의 div 요소가 있습니다. 외부 div에는 id='container'가 있고 내부 컨테이너에는 id='content'가 있습니다. 그 안에 아이콘이 있습니다.

<div id="container">        
  <div id="content">   
     <i class="fa fa-beer" style="font-size:24px"></i>       
  </div>      
</div>

1 . 플렉스박스 사용

flexbox를 사용하여 요소를 중앙에 배치할 수 있습니다. 이를 위해 flex에 display 속성을 할당합니다. 가운데 정렬 항목의 경우 justify-content 및 align-items 속성을 사용하여 가운데에 할당합니다.

#container {
  background: #eee;
  height: 500px;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

#content {
  background: pink;
  height: 100px;
  width: 200px;

  display: flex;
  justify-content: center;
  align-items: center;
}

2. 그리드 사용

그리드를 사용하여 요소를 중앙에 배치하는 것이 더 효율적인 방법 중 하나입니다. 디스플레이 속성을 사용하여 그리드를 활용할 수 있습니다. place-items 속성은 요소를 중앙에 가져오는 데 사용됩니다.

#container {
  background: #eee;
  height: 500px;
  width: 100%;
  position: relative;

  display: grid;
  place-items: center;
}

#content {
  top: 50%;
  background: pink;
  height: 100px;
  width: 200px;

  display: grid;
  place-items: center;
}

3. 위치 속성 사용

또 다른 방법은 위치 속성을 사용하여 사물을 중앙에 배치하는 오래된 방법입니다. 위치에 여백, 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 사용했습니다.

#container {
  background: #eee;
  height: 500px;
  width: 100%;

  position: relative;
}

#content {
  top: 50%;
  background: pink;
  height: 100px;
  width: 200px;

  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  margin: auto;
  /* to align the icon */
  text-align: center;
  line-height: 120px;
}