html - 조정 - td 안에 div 정렬




다른 div 안에 div 중심으로 세로로 배치 (16)

또 다른 방법은 Transform Translate를 사용하는 것입니다.

Outer Div는 positionrelative 또는 fixed relative 설정해야하며 Inner Div는 absolute , topleft 으로 50% 까지 position 를 설정하고 transform: translate(-50%, -50%) 적용해야합니다 transform: translate(-50%, -50%) .

div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}

div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
  
}
<div class="cn">
    <div class="inner">
        test
    </div>
</div>

테스트 대상 :

  • Opera 24.0 (최소 12.1)
  • Safari 5.1.7 (접두어가 -webkit- 인 최소 4 개)
  • Firefox 31.0 (최소 3.6, -moz- 접두사, 접두어없이 16)
  • Chrome 36 (접두어없이 36 자에서 -webkit- 접두사가있는 최소 11 자)
  • IE 11, 10 (최소 9 개는 -ms- 접두어, 10 개는 접두어 없음)
  • 더 많은 브라우저를 사용할 수 있습니까?

나는 다른 div 안에 추가 된 div를 중심에 놓고 싶습니다.

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

현재 사용중인 CSS입니다.

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 50%;
        left:50%;
        margin-top: -147px;
        margin-left: -144px;
    }

보시다시피, 내가 지금 사용하는 접근 방식은 innerDiv 너비와 높이에 대한 값에 따라 달라집니다. 너비 / 높이가 변경되면 margin-topmargin-left 값을 수정해야합니다. 가능한 모든 일반 솔루션이 있습니까? innerDiv 크기에 관계없이 항상 가운데에 innerDiv ?

나는 margin:auto 을 사용하는 것으로 알았습니다 margin:auto 는 innerDiv을 중간에 수평으로 정렬 할 수 있습니다. 그러나 수직 정렬은 어떨까요?


다른 div 안에 div 중심으로 세로로 배치

#outerDiv{
  width: 500px;
  height: 500px;
  position:relative;
  
  background-color: lightgrey;  
}

#innerDiv{
  width: 284px;
  height: 290px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	
  
  background-color: grey;
}
<div id="outerDiv">
  <div id="innerDiv"></div>
</div>


flex를 사용하여 CSS에서 div를 세로 및 가로로 가운데에 맞출 수 있습니다.

#outerDiv{
width: 500px;
    height: 500px;
    position:relative;
    border:1px solid #000;
    margin:0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    }

#innerDiv{
    width: 284px;
    height: 290px;
    border:1px solid #eee;

}

두 번째 것은 다음과 같습니다.

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid #000;
        }

        #innerDiv{
        max-width: 300px;
        height: 200px;
        background-color: blue;
        position:absolute; 
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border:1px solid #000;
        border-radius:4px;
    }

그리고 결과 HTML :

    <div id="outerDiv">
        <div id="innerDiv"></div>
    </div>

간단한 자바 스크립트 (jQuery) 블록으로이 작업을 수행 할 수 있습니다.

CSS :

#outerDiv{
    height:100%;
}

자바 스크립트 :

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>

그것의 높이 값을 지정하지 않는 innerdiv, 거기에 수직 centered.a 자바 솔루션을 innerdiv의 offsetHeight을 얻을 수있는 순수 CSS 솔루션이 없다 다음 style.marginTop을 계산합니다.


나는 그 질문이 1 년 전에 만들어 졌다는 것을 안다. 어쨌든 CSS3 덕분에 div에서 div를 쉽게 정렬 할 수있다. (예를 들어 http://jsfiddle.net/mcSfe/98/ )

<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>

div
{
display:-moz-box;
-moz-box-align:center;
} 

부모 요소의 텍스트 정렬 중심, 자식 요소의 인라인 블록 표시. 이것은 모든 것을 집중시킬 것입니다. 저는 그 부르심을 "블록 플로트"라고 믿습니다.

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

이것은 또한 float, 행운을위한 좋은 대안입니다!


세로 및 가로 모두 가운데 맞춤 :

#parentDiv{
    display:table;
    text-align:center;
}

#child {
     display:table-cell;
     vertical-align:middle;
}

위에 주어진 놀라운 대답을 읽은 후에도 여전히 이해하지 못했다면.

어떻게 달성 할 수 있는지에 대한 간단한 두 가지 예가 있습니다.

디스플레이 사용 : table-cell

.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  display: inline-block;
  text-align: left;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
  <div class="container">
    Center align a div using "<strong>display: table-cell</strong>"
  </div>
</div>

플렉스 박스 사용 (디스플레이 : 플렉스)

.wrapper {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  align-self: center;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
    <div class="container">
        Centering a div using "<strong>display: flex</strong>"
    </div>
</div>

참고 : 위의 구현을 사용하기 전에 display : table-cell 및 flex의 브라우저 호환성을 확인하십시오.


이 수평 및 수직 센터링을 달성하는 또 다른 방법은 다음과 같습니다.

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

( Reference )


피들 링크 < http://jsfiddle.net/dGHFV/2515/ >

이 시도

   #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid red;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        border:1px solid green;
    }

tl;dr

세로 정렬 중간 작동하지만 부모 요소에서 table-cell 을 사용하고 자식에서 inline-block 을 사용해야 table-cell .

이 솔루션은 IE6 & 7에서는 작동하지 않습니다.
너의 것이 더 안전한 방법이다.
하지만 CSS3와 HTML5로 질문에 태그를 추가 한 이후로 저는 현대적인 솔루션을 사용하는 것에 신경 쓰지 않았다고 생각했습니다.

고전적인 솔루션 (테이블 레이아웃)

이것은 나의 원래 대답이었다. 여전히 잘 작동하며 가장 넓은 지원을 제공하는 솔루션입니다. 테이블 레이아웃은 렌더링 성능에 영향을 미치 므로보다 현대적인 솔루션을 사용하는 것이 좋습니다.

여기에 예제가있다.

테스트 대상 :

  • FF3.5 이상
  • FF4 +
  • Safari 5 이상
  • Chrome 11 이상
  • IE9 +

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

현대 솔루션 (변형)

변환은 매우 잘 지원 되므로 더 쉽게 수행 할 수 있습니다.

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

Demo

♥ 내가 좋아하는 현대적인 솔루션 (flexbox)

나는 flexbox를 점점 더 많이 사용하기 시작했다. 이제는 가장 좋은 방법이다.

CSS

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

Demo

더 많은 예제 및 가능성 : 한 페이지의 모든 메소드 비교



height 가 설정되지 않은 경우 (자동); 당신은 inner div에 약간의 패딩 (위쪽과 아래쪽)을 주어서 수직으로 가운데로 만들 수 있습니다 :

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>

이것은 IE6로 다시 돌아갑니다!

<!DOCTYPE html> 은 IE6에서도 필요합니다! [IE6 기본 엄격 모드도 강제로 적용됩니다.]

(물론, 상자 색칠은 데모 용입니다.)

    #outer{
        width: 205px;
        height: 205px;
        margin: auto; 
        text-align: center;
    }
    #inner{
        text-align: left;
        vertical-align: middle;
        width: 120px;
        height: 120px;
        display: inline-block;
   
    }
    #center{
        height: 100%; width:0px;
        vertical-align: middle;
        display: inline-block;
    }
    div {background: rgba(0,128,255,.6)}
<div id=outer>
    <div id=center></div><div id=inner> The inner DIV
    </div>
</div>


#outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #innerDiv{
    background:cyan;
        width: 284px;
        height: 290px;

        
    }
<div id="outerDiv">
<div id="innerDiv">Inner Div
</div>
</div>

위에서 언급 한 CSS 스타일을 추가하기 만하면됩니다. 모두 제일 좋다. 쿼리 작성 코멘트





css3