절대적으로 위치한 부모 div 안에 div를 세로로 가운데에 배치하는 방법


146

분홍색 컨테이너 중간에 파란색 컨테이너를 얻으려고하지만 vertical-align: middle;그 경우에는 효과가없는 것 같습니다 .

<div style="display: block; position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;">
        <div style="background-color: lightblue;">test</div>
    </div>
</div>

결과:

여기에 이미지 설명을 입력하십시오

기대:

여기에 이미지 설명을 입력하십시오

어떻게 달성 할 수 있는지 제안하십시오.

JS 피들


1
position: absolute어디서나 사용하는 이유가 있습니까?
Vucko

vertical-align: middle;와 작품 display: inline-block또는 테이블 레이아웃
ctf0


@Vucko yes-이것은 매우 복잡한 레이아웃의 단순화 된 버전이기 때문에 전제 조건이지만 두 상위 div의 절대 위치가 핵심입니다.
Vladimirs

난 단지 생각할 수 @Vladimirs margin-top: calc((56px - 16px) / 2)56px - parent height, 16px - element height/font-size- JSFiddle
Vucko

답변:


332

우선 vertical-align테이블 셀 및 인라인 레벨 요소에만 적용 할 수 있습니다.

귀하의 요구를 충족 시키거나 충족시키지 못할 수있는 수직 정렬을 달성하는 몇 가지 방법이 있습니다. 그러나 나는 내가 좋아하는 두 가지 방법 을 보여줄 것이다 .

1. 사용 transformtop

.valign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* vendor prefixes omitted due to brevity */
}
<div style="position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

요점은 백분율 값 이 포함 블록 의 비율 값과 top관련이 있다는 것 height입니다. transforms 의 백분율 값 은 상자 자체의 크기 (경계 상자)와 관련이 있습니다.

당신이 발생하는 경우 폰트 렌더링 문제 (흐릿한 글꼴을), 수정은 추가하는 것입니다 perspective(1px)받는 transform이가되도록 선언 :

transform: perspective(1px) translateY(-50%);

CSS transform 가 IE9 +에서 지원 된다는 점에 주목할 가치가 있습니다.

2. inline-block(의사) 요소 사용

이 방법에는 선언에 inline-block의해 가운데에 세로로 정렬되는 두 개의 형제 요소가 있습니다 vertical-align: middle.

그 중 하나는이 height100%부모와 다른 하나는 우리의 원하는 요소 누구의 우리가 중앙에 맞 춥니 다 싶어합니다.

.parent {
    text-align: left;
    position: absolute;
    height: 56px;
    background-color: pink;
    white-space: nowrap;
    font-size: 0; /* remove the gap between inline level elements */
}

.dummy-child { height: 100%; }

.valign {
    font-size: 16px; /* re-set the font-size */
}

.dummy-child, .valign {
    display: inline-block;
    vertical-align: middle;
}
<div style="position: absolute; left: 50px; top: 50px;">
    <div class="parent">
        <div class="dummy-child"></div>
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

마지막으로 사용 가능한 방법 중 하나를 사용 하여 인라인 수준 요소 사이의 간격을 제거해야합니다 .


이 유용한 팁에 감사드립니다. 내 프로젝트에서 일하고있었습니다. 좋은 일.
Sedat Kumcu

첫 번째 방법 valign요소는display: block
Oleg

transform: translateY(-50%);전에 본 적이 없지만 완벽하게 작동합니다. 실제 생명의 은인.
베니 보 테마

55

이것을 사용하십시오 :

.Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

이 링크를 참조하십시오 : https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/


이것이 주요 솔루션이 아닌 방법은 무엇입니까? 너무 쉽고 작동합니다!
메이슨

21
height속성이 작동하려면 속성을 px, em 등으로 정의해야합니다.
Vaidas

부모 내부에 여러 div가 있으면 어떻게합니까? 모두가 서로 위에 배치되지는 않습니까?
psykid

"절대 중심"과 같은 수준에 자녀가 한 명 더 있으면 작동하지 않습니다
Pascut

18

콘텐츠를 중앙에 배치하려면 절대적으로 배치 된 div에 flex blox를 사용하십시오.

예를 참조 하십시오 https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview

.some-absolute-div {    
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;

  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
}

11

세로 및 가로 가운데 :

.parent{
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.c{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

3

display:table/를 사용할 수 있습니다table-cell;

.a{
   position: absolute; 
  left: 50px; 
  top: 50px;
  display:table;
}
.b{
  text-align: left; 
  display:table-cell;
  height: 56px;
  vertical-align: middle;
  background-color: pink;
}
.c {
  background-color: lightblue;
}
<div class="a">
  <div  class="b">
    <div class="c" >test</div>
  </div>
</div>


감사합니다, 귀하의 예제는 완벽하게 작동하지만 .b누락 position: absolute;된 코드는 더 명확하게 유지하기 위해 포함되지 않은 속성을 표시하는 것이 중요합니다. 테이블 셀을 절대적으로 배치하는 것은 의미가 없지만 클래스 와 클래스 position: absolute;모두 에서 유지할 수있는 또 다른 접근법이있을 수 있습니다. .a.b
Vladimirs

a가 절대 위치이고 b (자식)가 크기를 제공하는 경우 b는 그 자체가 나머지 컨텐츠를 향한 절대 위치에 있습니다. 크기를 유지한다고 가정하지 않으면 절대 절대 절대 내부의 목적을 이해하지 못합니까?
G-Cyrillus

1

다음은 Top 객체를 사용하는 간단한 방법입니다.

예 : 절대 요소 크기가 60px 인 경우

.absolute-element { 
    position:absolute; 
    height:60px; 
    top: calc(50% - 60px);
}

2
사용 calc이 도움이 되긴하지만 top: calc(50% - 30px)실제로 중심에 있어야합니다 .
brainbag

1

간단한 추가 솔루션

HTML :

<div id="d1">
    <div id="d2">
        Text
    </div>
</div>

CSS :

#d1{
    position:absolute;
    top:100px;left:100px;
}

#d2{
    border:1px solid black;
    height:50px; width:50px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;  
}

0

비슷한 문제에 대한이 답변을 확인하십시오.

이것은 내가 찾은 가장 쉬운 방법입니다.

https://stackoverflow.com/a/26079837/4593442

노트. 나는 디스플레이를 사용했다 : -webkit-flex; 디스플레이 대신 : flex; 사파리 내부 테스트를 위해.

각주. 나는 초보자 일 뿐이며 경험이 풍부한 사람의 도움을 공유합니다.


0

display:table;부모 div와 display: table-cell; vertical-align: middle;자식 div에서 사용하여 수행 할 수 있습니다

<div style="display:table;">
      <div style="text-align: left;  height: 56px;  background-color: pink; display: table-cell; vertical-align: middle;">
          <div style="background-color: lightblue; ">test</div>
      </div>
  </div>


3
귀하의 답변은 좋지만 코드의 기능에 대한 설명을 추가하여 크게 개선 할 수 있습니다.
DaFois
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.