본문 바로가기
개발 공부/Html, CSS

div 가운데 정렬 하는 방법

by momo'sdad 2023. 10. 18.

div 가운데 정렬 하는 방법

정렬 방향
div의 가로만 정렬
div의 세로만 정렬
div의 가로와 세로 모두 정렬

 


div의 가로만 정렬

가로로 정렬하는 세 가지 방법

  1. text-align 속성 이용
  2. flex 속성 이용
  3. position과 transform 속성 이용

​

● text align 속성 이용하여 가로 정렬

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Align div center</title>
</head>
<body>
  
  <div class="outer">
  
    <div class="inner">
      <span class="absolute">display: inline-block</span>
    </div>
    
    <span class="absolute">text-align: center</span>
  </div>
  
</body>
</html>

 

CSS

/* 백그라운드 색깔 및 크기 설정 */
html,body{background:#ddd}
.outer{width:400px;height:150px;background:pink}
.inner{width:150px;height:150px;background:black;color:white}




/* 가운데 정렬 */
.outer {
  text-align: center;
}

.inner {
  display: inline-block;
}




/* absolute */
.outer,.inner {position:relative}
.absolute {position:absolute;bottom:0;right:0}

CSS

.outer {

text-align: center;

}

​

.inner {

display: inline-block;

}

​

위 처럼 div.outer안에 div.inner가 있는 상황이고, 이 정렬 방법은 text-align 속성을 이용하여 정렬하는 방식입니다.

CSS

​

.outer {

text-align: center;

}

​

.inner {

display: inline-block;

}

​

이 가로 가운데 정렬 방법에서 가장 중요한 키포인트는 div.outer에는 text-align 속성이 center, div.inner 영역의 display가 inline-block으로 설정되어 있다는 것입니다.​

​

● flex 속성 이용하여 가로 정렬

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Align div center</title>
</head>
<body>
  
  <div class="outer">
  
    <div class="inner">
      
    </div>
    
    <span class="absolute">display: flex<br>
  justify-content: center</span>
  </div>
  
</body>
</html>

CSS

/* 백그라운드 색깔 및 크기 설정 */
html,body{background:#ddd}
.outer{width:450px;height:150px;background:pink}
.inner{width:150px;height:150px;background:black;color:white}




/* 가운데 정렬 */
.outer {
  display: flex;
  justify-content: center;
}


/* 
.inner {
  margin: 0 auto;
}
 */

같은 구조의 영역에서 CSS 속성만 변경하여 동일하게 적용

​

CSS

.outer {

display: flex;

justify-content: center;

}

​

또는

​

CSS

.outer {

display: flex;

}

​

.inner {

margin: 0 auto;

}

​

위 처럼 flex 속성을 이용하도 동일하게 가로 정렬을 적용할 수 있습니다.

이 방법의 키포인트는 div.outer 영역에 대해서 display 속성을 flex, justify-content 속성을 center로 설정하시거나 justify-content 속성 없이 div.inner 영역에 margin 속성을 0 auto로 설정해주시면 됩니다.

​

● position과 transform 속성 이용하여 가로 정렬

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Align div center</title>
</head>
<body>
  
  <div class="outer">
    <div class="inner">
          <span class="absolute">position: absolute<br>left: 50%<br>transform: translateX(-50%)<br></span>
    </div>
  </div>
  
</body>
</html>

CSS

/* 백그라운드 색깔 및 크기 설정 */
html,body{background:#ddd}
.outer{width:450px;height:150px;background:pink}
.inner{width:150px;height:150px;background:black;color:white}




/* 가운데 정렬 */
.inner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

 
 
/* absolute */
.outer,.inner {position:relative}
.absolute {position:absolute;bottom:0;right:0}

CSS

.inner {

position: absolute;

left: 50%;

transform: translateX(-50%);

}

이 방법은 position과 transform 속성을 이용하여 가운데 정렬하는 방법입니다. position 속성이 absolute로 설정되어야하기 때문에 div.outer의 width가 고정되어 있어야합니다.

transform 속성을 설정해주는 이유는 left 속성은 div 영역의 좌표(0,0) 기준으로 설정되기 때문입니다. transform 속성을 이용하면 위 그림과 같이 div.inner의 영역을 이동시킬 수 있습니다.

​

 

div의 세로만 정렬

세로로 정렬하는 세 가지 방법

 

  1. vertical-align 속성 이용
  2. flex 속성 이용
  3. position과 transform 속성 이용

​

● vertical align 속성 이용하여 세로 정렬

​

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <div class="outer">
  
    <div class="inner">
      <span class="absolute">display: table-cell
  vertical-align: middle</span>
    </div>
    
    <span class="absolute">display: inline-block</span>
  </div>
  
</body>
</html>

CSS

/* 백그라운드 색깔 및 크기 설정 */
html,body{background:#ddd}
.outer{width:150px;background:pink}
.inner{width:150px;height:100px;background:black;color:white}



/* 세로로 가운데 정렬 */
.outer {
  height:250px;
  display: table-cell;
  vertical-align: middle;
}

.inner {
  display: inline-block;
}




/* absolute */
.outer,.inner {position:relative}
.absolute {position:absolute;bottom:0;right:0}

div 영역은 위와 동일한 상태로 구성하였고, 이 세로 정렬 vertical-align 속성을 이용하는 방법입니다.

​

CSS

.outer {

height:250px;

display: table-cell;

vertical-align: middle;

}

​

.inner {

display: inline-block;

}

이 세로로 가운데 정렬하는 방법은 div.outer 영역은 높이가 고정적으로 설정이 되어 있어야하고, display 속성은 table-cell 그리고 vertical-align 속성은 middle로 설정이 되어야합니다. 또한 div.inner 영역의 display 속성은 inline-block 으로 설정되어야합니다.

※ 외부 div 영역의 높이를 설정하지 않거나 높이가 고정값이 아니라 "auto", "100%" 등의 가변적인 경우 정상적으로 정렬되지 않습니다.

​

● flex 속성 이용하여 세로 정렬

​

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <div class="outer">
  
    <div class="inner">
      <span class="absolute">/*margin: auto 0*/</span>
    </div>
    
    <span class="absolute">display: flex<br>align-items: center</span>
  </div>
  
</body>
</html>

CSS

/* 백그라운드 색깔 및 크기 설정 */
html,body{background:#ddd}
.outer{width:150px;height:250px;background:pink}
.inner{width:150px;height:100px;background:black;color:white}



/* 세로로 가운데 정렬 */
.outer {
  display: flex;
  align-items: center;
}


/* outer의 align-items 없이 아래 스타일을 정용
.inner {
  margin: auto 0;
}
 */
 

/* absolute */
.outer,.inner {position:relative}
.absolute {position:absolute;bottom:0;right:0}

​

영역 구조는 동일하게 하고 css의 속성만 변경하여 적용해보겠습니다.

​

CSS

.outer {

display: flex;

align-items: center;

}

​

또는

​

CSS

.outer {

display: flex;

}

​

.inner {

margin: auto 0;

}

div.outer 영역에 flex 속성과 align-items를 적용하여 세로 정렬이 가능합니다. 또는 align-items 속성이 없이도 div.inner 영역에 margin 속성을 auto 0으로 설정하여 적용 가능합니다.

​

● position과 transform 속성 이용하여 세로 정렬

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <div class="outer">
  
    <div class="inner">
      <span class="absolute">position: absolute<br>
  top: 50%<br>
  transform: translateY(-50%)</span>
    </div>
  </div>
  
</body>
</html>

CSS

/* 백그라운드 색깔 및 크기 설정 */
html,body{background:#ddd}
.outer{width:200px;height:250px;background:pink}
.inner{width:200px;height:100px;background:black;color:white}



/* 세로로 가운데 정렬 */
.inner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}


 

/* absolute */
.outer,.inner {position:relative}
.absolute {position:absolute;bottom:0;right:0}

​

CSS

.inner {

position: absolute;

top: 50%;

transform: translateY(-50%);

}

앞서 설명했던 postion과 transform으로 가로 정렬하는 방법과 동일한 방식으로 적용 가능합니다.

​

​

div의 가로와 세로 모두 정렬

지금까지는 가로만 정렬하거나 세로만 정렬하는 방법에 대해서 소개해드렸습니다. 지금부터는 가로와 세로 모두 정렬할 수 있는 방법을 알려드리겠습니다.

​

● flex 속성으로 가로와 세로 모두 정렬

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <div class="outer">
  
    <div class="inner">
      <span class="absolute">magin: auto</span>
    </div>
     <span class="absolute">display: flex</span>
  </div>
   
</body>
</html>

CSS

/* 백그라운드 색깔 및 크기 설정 */
html,body{background:#ddd}
.outer{width:400px;height:250px;background:pink}
.inner{width:220px;height:100px;background:black;color:white}


/* 가운데 정렬 */
.outer {
  display: flex;
  /* align-items: center; /* 수직 정렬 */
  /* flex-direction: row; /* default: row */
  /* justify-content: center; /* flex direction에 대해서 정렬방식 선택 */
}

.inner {
  margin: auto;
}

CSS

.outer {

display: flex;

}

​

.inner {

margin: auto;

}

​

또는

​

CSS

.outer {

display: flex;

align-items: center; /* 수직 정렬 */

flex-direction: row; /* default: row */

justify-content: center; /* flex direction에 대해서 정렬방식 선택 */

}

위에서 설명했던 가로와 세로 정렬의 flex 방식을 적용하여 정렬을 할 수 있습니다.

flex 속성에 대한 자세한 내용은 아래 링크를 통해 확인하실 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/CSS/flex

 

flex - CSS: Cascading Style Sheets | MDN

flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성입니

developer.mozilla.org

 

● postion과 transform으로 가로와 세로 모두 정렬

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

  <div class="outer">
  
    <div class="inner">
      <span class="absolute">position: absolute<br>top: 50%<br>left: 50%<br>transform: translate(-50%,-50%)</span>
    </div>
  </div>
  
</body>
</html>

CSS

/* 백그라운드 색깔 및 크기 설정 */
html,body{background:#ddd}
.outer{width:400px;height:250px;background:pink}
.inner{width:220px;height:100px;background:black;color:white}



/* 가운데 정렬 */
.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

CSS

.inner {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

}

position과 transform을 이용한 가로와 세로 가운데 정렬을 동시에 적용한 예제입니다.

​

​

​

※ 주의 사항

 

지금까지 소개해드린 모든 방법 중에 동작이 되지 않는 경우가 있으면 width 혹은 height가 고정적으로 선택이 되어 있는지 확인해보시기 바랍니다.

반응형
저작자표시

'개발 공부 > Html, CSS' 카테고리의 다른 글

[CSS] 글자 사이에 구분선 넣기  (0) 2023.10.18
반응형 웹 만드는 법 (디바이스 종류별 width값)  (0) 2023.10.18
Html a태그  (0) 2023.10.18
<CSS> <a>태그 밑줄없애기, 색상 변경하기  (0) 2023.10.18
Html/ nav태그  (0) 2023.10.18

관련글

티스토리툴바