DIV 중심을 수평 및 수직으로 맞춥니다.

DIV 중심을 수평 및 수직으로 맞춥니다.

이 질문에는 이미 다음과 같은 답이 있습니다.

요소의 중심을 수평 및 수직으로 맞추는 방법 (27개 답변)

마감됨8년 전에.

DIV를 수직 및 수평으로 중앙에 배치하는 방법이 있습니까? 중요한 것은 창이 내용보다 작을 때 내용이 잘리지 않는다는 것입니다. DIV는 배경색과 너비 및 높이를 가져야 합니다.

저는 항상 제공된 예와 같이 절대 위치와 음의 여백을 가진 div를 중심으로 했습니다.하지만 위에 있는 내용을 잘라낸다는 문제점이 있습니다.이 문제 없이 div.content를 집중시킬 수 있는 방법이 있습니까?

다음은 http://jsbin.com/iquviq/1/edit 의 예입니다.

CSS:

body { margin: 0px; }

.background {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: yellow;
}

/* 
is there a better way than the absolute positioning and negative margin to center the div .content: div with background color a width and a hight?: 
*/ 


.content {
    width: 200px;
    height: 600px;
    background-color: blue;

    position:absolute;
    top:50%;
    left:50%;
    margin-left:-100px;/* half width*/
    margin-top:-300px;/* half height*/
}

HTML:

<div class="background">
    <div class="content"> some text </div>
</div>

제 질문은 "요소의 중심을 수평 및 수직으로 잡는 방법"과 중복되지 않습니다.1 - 전에 제 질문이 있었습니다.(날짜만 확인).2- 제 질문은 매우 명확하고 검은색으로 "창이 내용보다 작으면 내용이 잘리지 않습니다"라는 조건으로 질문합니다.

최신 브라우저용

당신이 그 사치를 누릴 때.플렉스박스도 있지만, 이 글을 쓸 당시에는 널리 지원되지 않았습니다.

HTML:

<div class="content">This works with any content</div>

CSS:

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

코드펜이나 JSBin에서 더 수정합니다.

이전 브라우저 지원에 대해서는 이 스레드의 다른 부분을 참조하십시오.

많은 것을 시도한 후에 저는 효과적인 방법을 발견합니다.누구에게나 유용하다면 여기서 공유합니다.http://jsbin.com/iquviq/30/edit 에서 작동하는 것을 볼 수 있습니다.

.content {
        width: 200px;
        height: 600px;
        background-color: blue;
        position: absolute; /*Can also be `fixed`*/
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        /*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
        max-width: 100%;
        max-height: 100%;
        overflow: auto;
}

여기 데모가 있습니다. http://www.w3.org/Style/Examples/007/center-example

방법(JSFidle 예제)

CSS:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}
#content {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

HTML:

<div id="content">
    Content goes here
</div>

다른 방법(JSFidle 예제)

CSS

body, html, #wrapper {
    width: 100%;
    height: 100%
}
#wrapper {
    display: table
}
#main {
    display: table-cell;
    vertical-align: middle;
    text-align:center
}

HTML

<div id="wrapper">
<div id="main">
    Content goes here
</div>
</div>

브라우저 크기에 관계없이 합법적인 방법은 다음과 같습니다.

   div{
    margin:auto;
    height: 200px;
    width: 200px;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:red;
   }

라이브 코드

이 페이지에서 설명한 다양한 방법을 비교할 수 있습니다. http://blog.themeforest.net/tutorials/vertical-centering-with-css/

이들이 권장하는 방법은 중심을 잡을 수 없는 내용 앞에 빈 부동 요소를 추가한 후 삭제하는 것입니다.당신이 말한 단점은 없습니다.

저는 그것을 적용하기 위해 당신의 JSB를 포크했습니다: http://jsbin.com/iquviq/7/edit .

HTML

<div id="floater">
</div>

<div id="content">
  Content here
</div>

CSS

#floater {
  float: left; 
  height: 50%; 
  margin-bottom: -300px;
}

#content {
  clear: both; 
  width: 200px;
  height: 600px;
  position: relative; 
  margin: auto;
}

나는 CSS로 이것을 엄격히 할 수 있는 방법이 있다고 생각하지 않습니다.그 이유는 부모 요소가 자식 요소의 내용과 함께 확장되도록 강제하는 질문에 대한 "중요한" 한정자이기 때문입니다.

제 생각에 당신은 아이의 키를 찾고 조정하기 위해 자바스크립트의 일부를 사용해야 할 것입니다.

다음 HTML을 사용하여:

<div class="parentElement">  
  <div class="childElement">  
    ...Some Contents...  
  </div>  
</div>  

다음 CSS:

.parentElement{위치:계속;폭:960㎜;}.childElement {}위치:절대;상위: 50%;왼쪽: 50%;
}

이 jQuery는 유용할 수 있습니다.

$('.childElement').each(function(){
  // determine the real dimensions of the element: http://api.jquery.com/outerWidth/
  var x = $(this).outerWidth();
  var y = $(this).outerHeight();
  // adjust parent dimensions to fit child
  if($(this).parent().height() < y) {
    $(this).parent().css({height: y + 'px'});
  }
  // offset the child element using negative margins to "center" in both axes
  $(this).css({marginTop: 0-(y/2)+'px', marginLeft: 0-(x/2)+'px'});
});

jQ는 영향을 받는 요소 아래의 본체 또는 내부의 헤드에 적절히 장착해야 합니다.$(document).ready(...).

언급URL : https://stackoverflow.com/questions/14123999/center-a-div-horizontally-and-vertically