🕹️ CSS 요소 수평/수직 정렬 기법 모음

...

수평 중앙 정렬

📢 inline / inline-block 요소

정렬 대상 요소(inline)의 부모 요소(block)에 text-align: center;를 지정한다.

inline, inline-block, inline-table, inline-flex, 기타 등등에 적용된다.

<!-- HTML -->
<nav>
  <a href="#">One</a> <!-- a태그는 inline요소 이다 -->
  <a href="#">Two</a>
  <a href="#">Three</a>
  <a href="#">Four</a>
</nav>

<!-- CSS -->
<style>
nav {
  text-align: center;
}
</style>

자식요소가 block요소이면, 강제로 자식요소를 inline-block요소로 만들어주는 방법도 있다.

<!-- HTML -->
<main class="inline-block-center">
  <div> I'm an element that is block-like with my siblings and we're centered in a row. </div>
  <div> I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. </div>
  <div> I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

<!-- CSS -->
<style>
  .inline-block-center {
    text-align: center; /* inline요소만 적용됨 */
  }
  .inline-block-center div {
    display: inline-block; /* block요소인 div를 inline으로 만들어준다. */
    width: 200px;

    text-align: left; /* 안의 내용 글자 정렬 */
  }
</style>

📢 block 요소

정렬 대상 요소에 너비(width)를 명시적으로 지정하고 margin-right와 margin-left 프로퍼티에 auto를 지정한다.

(width를 지정하지 않으면, 어차피 block요소는 가로를 전체 차지하니 중앙 정렬 의미가 없기 때문이다.)

.item {
  width: 200px;
  margin: 0px auto;
}

📢 이미지

Image는 왼쪽, 오른쪽 margin을 auto로 설정하고 display: block; 으로 설정하면 된다.

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

📢 Position / Transform 이용

item {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

📢 Flex 이용

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

수직 중앙 정렬

📢 inline / inline-block 요소

- 한줄 일 경우

disaplay: block 설정 후 height와 line-height를 같은 값으로 설정하면 된다.

이 때 white-space: nowrap 속성으로 자동 줄바꿈이 안되도록 해야한다.

main span {
  display: block;
  width: 50%;
  
  height: 100px;
  line-height: 100px;
  
  white-space: nowrap;
}

- 여러줄 일 경우

.center { /* 부모 */
   display: table;
}
.center span {
   display: table-cell;
   vertical-align: middle; /* top, bottom */
}

📢 block 요소

- 자식 요소의 높이가 고정되어 있는 경우

부모 요소를 기준으로 절대 위치를 지정한다.

.parent {
  position: relative;
}

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

- 자식 요소의 높이가 auto 인 경우

부모 요소를 기준으로 절대 위치를 지정한다.

.parent {
  position: relative;
}

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

📢 Position / Transform 이용

item {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

📢 Flex 이용

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

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

📢 텍스트 세로 정렬

a {
  height: 130px; 
  display: table-cell; 
  vertical-align: middle;
}

수평 + 수직 중앙 정렬

📢 Position / Transform 이용

- 자식 요소의 높이가 고정되어 있는 경우

.center {
  position: relative;
}

.center div {
  position: absolute;
  width: 300px;
  height: 200px;

  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px; /* margin-top을 width의 절반만큼 마이너스 설정, */
                             /* margin-left를 height의 절반만큼 마이너스로 설정 */
}

- 자식 요소의 높이가 auto 인 경우

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

📢 Flex 이용

.parent {
  display: flex;
  justify-content: center; /* 플랙스 박스 정렬 */
  align-items: center; /* 플랙스 아이템 정렬 */
}

📢 Grid 이용

.wrapper {
  display: grid;
  place-items: center;
}

좌 / 우측 쪽으로 정렬

📢 inline / inline-block 요소

.container {
  text-align: right; /* left */
}

.item { /* inline 요소 */
  width: 150px;
  display: inline-block; /* block요소일 경우 일부러 inline-block으로 변경해준다. */
}

📢 block 요소

.right {
  position: absolute;
  right: 0px; /* left: 0px */
}

참고: absolute로 설정한 element는 정상 흐름에서 제거되어 다른 element와 겹칠 수 있다.

📢 float 이용

.right {
  float: right; /* left */
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

📢 position 이용

header {
  position: relative;
}

nav {
  position: absolute;
  top: 0;
  right: 0; /* left: 0 */
  padding: 20px;
}

📢 Flex (우측)

header {
  display: flex;
  justify-content: flex-end /* or space-between; */
}

header {
  display: flex;
}

nav {
  margin-left: auto;
}

📢 Grid (우측)

요소들이 각기 다른 가로길이를 가지고 있을때 1fr로 설정하고 열대로 차례로 배치하게되면, 다른 가로길이때문에 좌우측 정렬이 되기도 하다.

header {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 1fr;
}

양끝 정렬

📢 position 속성을 이용한 좌우 정렬

절대 위치 지정 방식으로 위치한 요소는 정상적인 레이아웃에서 벗어나 다른 요소와 겹칠 수 있게 된다.

따라서 이 특성을 이용하면 HTML 요소를 수평 방향으로 좌우 정렬할 수 있다.

position 속성을 이용하여 정렬할 경우에는 <body>요소에 margin과 padding 속성값을 설정하는 것이 좋다.

이렇게 함으로써 웹 브라우저마다 레이아웃이 다르게 보이는 것을 미리 방지할 수 있다.

 body {
     padding: 0;
     margin: 0;
}

 div {
     border: 3px solid #4B0082;
     width: 300px;
     padding: 10px;
     margin: 0;
     position: absolute;
     right: 0; /* 우측에 딱 붙이기 */
}

📢 float 속성을 이용한 좌우 정렬

float 속성을 이용하면 수평 방향으로 좌우 정렬할 수 있다.

float 속성을 이용하여 정렬할 경우에는 <body>요소에 margin과 padding 속성값을 설정하는 것이 좋다.

이렇게 함으로써 웹 브라우저마다 레이아웃이 다르게 보이는 것을 미리 방지할 수 있다.

body {
     padding: 0;
     margin: 0;
}

div {
     border: 3px solid #4B0082;
     width: 350px;
     padding: 10px;
     margin: 0;
}

div.left {
     float: left 
}

div.right {
     float: right 
}