위치 : 상대로 항목 중앙

위치 : 상대로 항목 중앙

---

절대적으로 배치 된 div 위로 마우스를 가져 가면 나타나는 메뉴가 있습니다. 절대적으로 div가 한 페이지에 여러 번 나타나고 한 인스턴스에서 여러 크기로 나타나기 때문에 모든 메뉴 항목은 상대적으로 배치되어야합니다.

position: relative상위 div의 크기를 모를 때 어떻게 여러 항목을 세로 및 가로로 가운데에 배치합니까?

나는 position: absolute마이너스 마진 이있는 트릭을 알고 있지만,이 상황은 다른 것을 요구합니다.

코드는 다음과 같습니다.

.OuterCase { 
  position  : absolute; 
  width     : 100%;  
  height    : 100%; 
  text-align: center;
}

.InnerItem  { 
   width  : 38px;
   height : 38px;
   display: inline-block;
}

항목을 가로로 가운데에 배치했습니다. 조금 이해하기 어려운 수직선을 얻고 있습니다.

---

훨씬 간단합니다.

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

이제 부모 요소의 중심에 있습니다. 수직으로도 할 수 있습니다.

---

또는 CSS3 Flexible Box Model을 사용할 수도 있습니다 . 다음과 같이 중앙 콘텐츠에도 적용 할 수있는 유연한 레이아웃을 만드는 좋은 방법입니다.

#parent {
    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;
}

---

상대적으로 (또는 다른 방식으로) 배치 된 div가 있으면 그 안에 무언가를 중앙에 배치 할 수 있습니다. margin:auto

수직 센터링 은 약간 까다 롭지 만 가능합니다.

---

를 사용 calc하여 중심을 기준으로 요소를 배치 할 수 있습니다 . 예를 들어 요소를 200px중앙에서 바로 배치하려면 다음과 같이 할 수 있습니다.

#your_element{
    position:absolute;
    left: calc(50% + 200px);
}

이것을 잊지 마세요

당신이 표시를 사용할 때 +와 -는 기호와 숫자 사이에 하나 개의 빈 공간이 있어야합니다,하지만 당신은 표시를 사용할 때 *와 /빈 공간에 대한 필요가 없습니다.

---

또 다른 옵션은 요소를 수직으로 중앙에 배치하는 추가 래퍼를 만드는 것입니다.

#container{
  border:solid 1px #33aaff;
  width:200px;
  height:200px;
}

#helper{
  position:relative;
  height:50px;
  top:50%;
  border:dotted 1px #ff55aa;
}

#centered{
  position:relative;
  height:50px;
  top:-50%;
  border:solid 1px #ff55aa;
}

<div id="container">
  <div id="helper">
    <div id="centered"></div>
  </div>
<div>

참고URL : https://stackoverflow.com/questions/6626314/center-an-item-with-position-relative