CSS : <div> 요소 내의 중심 요소

HTML 요소를 가운데에 맞추기 위해 CSS를 사용할 수 있습니다 left: 50%;. 그러나 이것은 전체 창을 기준으로 요소를 중앙에 배치합니다.

요소의 자식 인 <div>요소가 있으며 <div>전체 창이 아닌 이 부모와 관련하여 자식을 중앙에 배치하려고합니다 .

컨테이너 <div>가 모든 내용을 중심으로 하고 싶지는 않지만 하나의 특정 자식 을 원합니다 .

설정 text-align:center;부모 DIV, 그리고 margin:auto;자식 DIV에.

#parent {
    text-align:center;
    background-color:blue;
    height:400px;
    width:600px;
}
.block {
    height:100px;
    width:200px;
    text-align:left;
}
.center {
    margin:auto;
    background-color:green;
}
.left {
    margin:auto auto auto 0;
    background-color:red;
}
.right {
    margin:auto 0 auto auto;
    background-color:yellow;
}

<div id="parent">
    <div id="child1" class="block center">
        a block to align center and with text aligned left
    </div>
    <div id="child2" class="block left">
        a block to align left and with text aligned left
    </div>
    <div id="child3" class="block right">
        a block to align right and with text aligned left
    </div>
</div>

이것은 대부분 무엇이든 중심을 잡는 좋은 자원입니다.
http://howtocenterincss.com/

실제로 이것은 CSS3 flex 박스에서 매우 간단 합니다.

.flex-container{
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  
  justify-content: center;
  align-items: center;
  
  width: 400px;
  height: 200px;
  background-color: #3498db;
}

.inner-element{
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
}

<div class="flex-container">
  <div class="inner-element"></div>
</div>

최신 정보:

이 답변을 작성한 시점에서 OP 편집을 읽지 않은 것 같습니다. 위의 코드는 모든 내부 요소를 중심 에 배치하지만 (중복 요소 는 제외) OP는 다른 내부 요소가 아닌 특정 요소 만 가운데에 배치하려고 합니다. 따라서 @Warface answer 두 번째 방법이 더 적합하지만 여전히 수직 중심이 필요합니다.

.flex-container{
  position: relative;
  
  /* Other styling stuff */
  width: 400px;
  height: 200px;
  background-color: #3498db;
}

.inner-element{
  position: absolute;
  left: 50%;
  top: 50%;
  
  transform: translate(-50%,-50%);
  /* or 3d alternative if you will add animations (smoother transitions) */
  transform: translate3d(-50%,-50%,0);

  /* Other styling stuff */
  width: 100px;
  height: 100px;
  background-color: #f1c40f;
}

<div class="flex-container">
  <p>Other inner elements like this follows the normal flow.</p>
  <div class="inner-element"></div>
</div>

CSS

  body{
    text-align:center;
    }
    .divWrapper{
    width:960px //Change it the to width of the parent you want
    margin: 0 auto;
    text-align:left;
    }

HTML

<div class="divWrapper">Tada!!</div>

이것은 div를 중심에 두어야합니다

2016-HTML5 + CSS3 방법

CSS

div#relative{
  position:relative;
}

div#thisDiv{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

HTML

<div id="relative">
  <div id="thisDiv">Bla bla bla</div>
</div>

피들

https://jsfiddle.net/1z7m83dx/

text-align:center; 부모 div에서 트릭을 수행해야합니다.

특정 아동만을 중앙에 배치하려면 :

.parent {
  height: 100px;
  background-color: gray;
  position: relative;
}

.child {
  background-color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 20px;
  height:20px;
  margin: auto;

}

<div class="parent">
   <span class="child">hi</span>
</div>  

또는 flex를 사용할 수도 있지만 모든 어린이를 중심으로합니다.

.parent {
  height: 100px;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  background-color: white;  
}

<div class="parent">
   <span class="child">hi</span>
</div>

부트 스트랩 플렉스 클래스 이름을 다음과 같이 사용할 수 있습니다.

<div class="d-flex justify-content-center">
    // the elements you want to center
</div>

내부의 많은 요소에서도 작동합니다.

div가 고정 너비입니까 아니면 유체 너비입니까? 어느 쪽이든, 유체 너비에는 다음을 사용할 수 있습니다.

#element { /* this is the child div */
margin-left:auto;
margin-right:auto;
/* Add remaining styling here */
}

또는 부모 div를 text-align:center;및 자식 div를 로 설정할 수 text-align:left;있습니다.

그리고 left:50%;단지 사업부로 설정되어 전체 페이지에 따라 중심을 position:absolute;. div를 설정하면 left:50%;부모 div의 너비를 기준으로해야합니다. 고정 너비의 경우 다음을 수행하십시오.

#parent {
width:500px;
}

#child {
left:50%;
margin-left:-100px;
width:200px;
}

그냥 부모 div를 줘 position: relative

CSS3을 사용하려는 경우 :

position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);

요소 너비에 맞는 백분율을 얻는 방법을 알아 내기 위해 추가 검색을 수행 할 수 있습니다.

우선 왼쪽 : 50 %로 부모 div를 중심으로 할 수 있지만 CSS 위치를 알아야합니다.

많은 사람들이 할 수있는 한 가지 해결책은 다음과 같은 일을하는 것입니다.

    div.parent { text-align:center; }    //will center align every thing in this div as well as in the children element
    div.parent div { text-align:left;}   //to restore so every thing would start from left

중심이 될 귀하의 사업부가 상대적으로 위치하고 있다면, 당신은 할 수 있습니다

    .mydiv { position:relative; margin:0 auto; } 

왼쪽 : 50 %는 정적 너비가 할당 된 가장 가까운 부모에 대해 개별적으로 작동합니다. 너비 : 500px 또는 부모 div에 무언가를보십시오. 또는 중앙에 표시 할 콘텐츠를 표시 : 차단하고 왼쪽 및 오른쪽 여백을 자동으로 설정하십시오.

자식 요소 (예 : 아닌 인라인 경우 div, table등) 나는 내부를 마무리 할 div또는 p래퍼의 텍스트 정렬 CSS의 속성을 중심으로 동일합니다.

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="text-align: center">
            This <button>button</button> is centered.
        </div>
        This text is still aligned left.
    </div>

그렇지 않으면 요소가 고정 너비 의 블록 ( display: block예 : a div또는 a p) 인 경우 여백 왼쪽 및 오른쪽 CSS 속성을 자동으로 설정합니다.

    <div id="container">
        This text is aligned to the left.<br>
        So is this text.<br>
        <div style="margin: 0 auto; width: 200px; background: red; color: white;">
            My parent is centered.
        </div>
        This text is still aligned left.
    </div>

물론 text-align: center래퍼 요소에 a 를 추가하여 내용을 중앙에 배치 할 수도 있습니다.

IMHO는 OPs 문제를 해결하는 방법이 아니지만 이 링크 를 확인 하여 매우 유용 하기 때문에 포지셔닝에 신경 쓰지 않습니다 .

요소를 가운데에 배치 할 새 div 요소를 만든 다음 해당 요소를 가운데에 맞추기위한 클래스를 다음과 같이 추가하십시오.

<div id="myNewElement">
    <div class="centered">
        <input type="button" value="My Centered Button"/>
    </div>
</div>

CSS

.centered{
    text-align:center;
}

다른 해결책을 찾았습니다

<style type="text/css">
    .container {
        width:600px; //set how much you want
        overflow: hidden; 
        position: relative;
     }
     .containerSecond{
        position: absolute; 
        top:0px; 
        left:-500%; 
        width:1100%;
     }
     .content{
        width: 800px; //your content size 
        margin:0 auto;
     }           
</style>

그리고 몸에

<div class="container">
   <div class="containerSecond">
       <div class="content"></div>
   </div>
</div>

컨테이너가 크거나 작을 때마다 콘텐츠 div를 중앙에 배치합니다. 이 경우 콘텐츠가 가운데에 있지 않도록 컨테이너의 1100 %보다 커야하지만이 경우 containerSecond로 더 크게 만들 수 있습니다.

text-align: center;부모와 display: inline-block;div에 할당하십시오 .

예를 들어, 기본 콘텐츠 div 안에있는 기사 div가 있습니다. 기사 안에 이미지가 있고 해당 이미지 아래에 다음과 같은 스타일의 버튼이 있습니다.

. 기사 {

width: whatever;
text-align: center; 
float: whatever (in case you got more articles in a row); 
margin: give it whatever margin you want;

}. 기사 {

}

/ * 기사 내부에 이미지를 중앙에 배치하고 싶습니다 * /

.article img {

float: none;
margin: 0 auto;
padding: give it a padded ridge if you want;

}

/ * 이제 같은 아티클 요소의이 이미지 아래에 더 많은 버튼과 같은 버튼이 있어야합니다. 물론 반응 형 디자인 내부에서 em 또는 %로 작업해야합니다. * /

.button {

background: #whatever color:
padding: 4.3567%; /*Instead of fixed width*/
text-align: cente;
font: whatever;
max-width: 41.4166%;
float: none;
margin: 0 auto; /* You could make the zero into any margin you want on the top and bottom of this button.. Just notice the float: none property.. this wil solve most your issues, also check if maybe position and displaay might mess up your code..*/

}

행운을 빕니다

div 안에 요소를 중앙에 배치하고 나누기 크기에 신경 쓰지 않으려면 Flex power를 사용할 수 있습니다. 나는 flex를 사용하는 것을 선호하고 요소에 정확한 크기를 사용하지 않습니다.

<div class="outer flex">
    <div class="inner">
        This is the inner Content
    </div>
</div>

보시다시피 외부 div는 Flex 컨테이너이고 Inner는 flex: 1 1 auto;더 나은 이해를 위해 지정된 Flex 항목이어야합니다 .이 간단한 샘플을 볼 수 있습니다. http://jsfiddle.net/QMaster/hC223/

이 도움을 바랍니다.

내 마법을 원합니다.

html, body {
 height: 100%;
}

.flex-container{
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
}


<div class="flex-container">
  <div>Content</div>
</div>

<html>
<head>
</head>
<style>
  .out{
    width:200px;
    height:200px;
    background-color:yellow;
  }
   .in{
    width:100px;
    height:100px;
    background-color:green;
    margin-top:50%;
    margin-left:50%;
    transform:translate(-50%,50%);
  }
</style>
  <body>
     <div class="out">
     <div class="in">

     </div>
     </div> 
  </body>
</html>