DIV를 가로 및 세로 가운데에

DIV를 가로 및 세로 가운데에

---

이 질문에는 이미 답변이 있습니다.

• 요소를 가로 및 세로로 가운데 맞추는 방법 19 답변

DIV를 세로 및 가로 로 CENTER 하는 방법이 있습니까? 그러나 창이 내용보다 작을 때 내용이 잘리지 않도록 하는 것이 중요 합니다 . div의 배경색과 너비 및 높이가 있어야합니다.

제공된 예제와 같이 항상 절대 위치와 음수 여백으로 div를 중앙에 배치했습니다. 그러나 내용을 잘리는 문제가 있습니다. 이 문제없이 div 컨텐츠를 중앙에 배치하는 방법이 있습니까?

여기에 예제가 있습니다 : 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- 내 질문은 조건으로 매우 명확하고 검은 색으로 묻습니다. "창이 내용보다 작을 때 내용이 잘리지 않습니다"

---

많은 것을 시도한 후에 나는 효과가있는 방법을 찾았습니다. 누구에게나 유용한 경우 여기에서 공유합니다. 여기에서 작동하는 것을 볼 수 있습니다 : http://jsbin.com/iquviq/30/edit

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

        position:absolute; /*it can be fixed too*/
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;

        /*this to solve "the content will not be cut when the window is smaller than the content": */
        max-width:100%;
        max-height:100%;
        overflow:auto;
    }

---

에 대한 최신 브라우저

당신이 그 사치를 가질 때. flexbox도 있지만이 글을 쓰는 시점에서는 광범위하게 지원되지 않습니다.

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%);
}

Codepen 또는 JSBin에서 추가 로 땜질

구형 브라우저 지원에 대해서는이 스레드의 다른 곳을보십시오.

---

Here's a demo: http://www.w3.org/Style/Examples/007/center-example

A method (JSFiddle example)

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>

Another method (JSFiddle example)

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>

---

The legitimate way to do that irrespective of size of the div for any browser size is :

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

Live Code

---

You can compare different methods very well explained on this page: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

The method they recommend is adding a empty floating element before the content you cant centered, and clearing it. It doesn't have the downside you mentioned.

I forked your JSBin to apply it : 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;
}

---

I do not believe there is a way to do this strictly with CSS. The reason is your "important" qualifier to the question: forcing the parent element to expand with the contents of its child.

My guess is that you will have to use some bits of JavaScript to find the height of the child, and make adjustments.

So, with this HTML:

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

This CSS:

.parentElement {  
  position:relative;
  width:960px;
}
.childElement {
  position:absolute;
  top:50%;
  left:50%;
}

This jQuery might be useful:

$('.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'});
});

Remember to load the jQ properly, either in the body below the affected elements, or in the head inside of $(document).ready(...).

---

You want to set style

margin: auto;

And remove the positioning styles (top, left, position)

I know this will center horrizontaly but I'm not sure about vertical!

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