[CSS] - 일반 및 position 중앙배치

position 중앙배치

• position : absolute 하는 순간 모든 요소는 inline-block이 됨!
  

  .icon { 
      border: 1px solid red;
      width: 125px;
      height: 125px;
      margin: 10px;
      position: relative;
  }
  
  .icon span {
      position: absolute;
      background-color: #000;
      color: #fff;
      width: 300px;
      text-align: center;
      padding: 10px;
      border-radius: 5px;
      top: -100px;
          //이부분이 중요!!
      left: 50%;
      transform: translateX(-50%)
  }

  
  
  

화면 중앙에 배치하는 여러가지 방법

1. position, transform 사용

     h1 {
         position : absolute;
         top: 50%;
         left: 50%;
         transform : translate(-50%, -50%);
     }

2. flex 사용

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

3. vertical-align, text-align 사용

4.line-height 사용

.icon-button {
	height: 48px;
   width: 48px;
   border-radius: 24px;
   background: #49d842;
   text-align : center;
}
.icon-button > span.icon {
	line-height: 48px;
}

5. margin: auto; 사용 (수평중앙)

body {
	width : 100%;
    padding: 0;
    margin: 0;
}
main {
	width: 100%;
    max-width: 1120px;
    margin: auto;
}

6. text-align: center 사용 (수평중앙) - 부모 엘리먼트에 이 속성을 넣고, 자녀 엘리먼트에 inline 계열 display 속성을 넣어 사용

.center {
	text-align : center;
}

7. Grid와 place-content 사용

.container {
	display: grid;
    place-content:center;
}