: a 의심중요소: a 의심중요소: a 의심중요소요소

: a 의심중요소

요소

을 잡기 는 CSS 할 수 .left: 50%;그러나 전체 창을 기준으로 요소의 중심을 맞춥니다.

나는 아이의 아이인 요소를 가지고 있습니다.<div> 저는 이 부모님에 .<div>창문 전체가 아닙니다.

나는 그 컨테이너를 원하지 않습니다.<div>모든 내용을 중심에 두고 특정한 한 명의 아이만 있도록 하는 것.

트text-align:center;div에게, 부모디에게브그고리, 고,리▁to.margin:auto;아이 디브에게.

#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://.com/http://howtocenterincss.com/

사실 이것은 CSS3 플렉스 박스에서 매우 간단합니다.

.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 답변 두 번째 방법이 더 적절하지만 수직 중심화가 여전히 필요합니다.

.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>

이것은 디브의 중심이 될 것입니다.

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/

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

<div class="d-flex justify-content-center">
    // the elements you want to 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>  

또는 플렉스도 사용할 수 있지만, 그러면 모든 어린이가 집중됩니다.

.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>

text-align:center; 합니다.

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

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

를 또는부를다음같과설수있정할다습니이모를수있▁to로 설정할 .text-align:center;는 리고아이디는브그는▁and▁to▁div.text-align:left;.

그리고.left:50%;로 설정되어 있을 페이지에 .position:absolute;이 div를 div로 한다면,left:50%;그것은 부모 디브의 폭에 상대적으로 그것을 해야 합니다.고정 너비의 경우 다음을 수행합니다.

#parent {
width:500px;
}

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

div를 .position: relative

나는 현대적인 방법이place-items: center

예는 https://1linelayouts.glitch.me 에서 확인할 수 있습니다.

CSS3를 사용하려는 경우:

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

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

플렉스 후에 쇼 에세이.

.container{
  display:flex;
  color:blue;
  background-color: yellow;
  justify-content:center;
 
}

<div class="container">
  <div>Element</div>
  </div>

and if you set element Center elements horizontally and vertically.

.container{
  display:flex;
  color:blue;
  height:100px;
  background-color: yellow;
  justify-content:center;
  align-items:center;
}

<div class="container">
  <div>Element</div>
  </div>

우선 왼쪽: 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

만약 중심이 될 당신의 div가 상대적으로 위치한다면, 당신은 그냥 할 수 있습니다.

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

왼쪽: 정적 너비가 할당된 가장 가까운 부모에 대해 50%가 각각 작동합니다.시도 너비: 500px 또는 모체 div에 있습니다.또는 중앙 디스플레이에 필요한 콘텐츠를 차단하고 왼쪽 및 오른쪽 여백을 자동으로 설정합니다.

자식 요소가 인라인인 경우(예: not a)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예를 들어div또는p) 고정된 너비로, 저는 여백 왼쪽과 오른쪽 CSS 속성을 auto로 설정할 것입니다.

    <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내용을 중앙에 배치하기 위해 래퍼 요소로 이동합니다.

IMHO는 OP 문제를 해결하는 방법이 아니기 때문에 포지셔닝에 신경 쓰지 않겠습니다. 하지만 이 링크를 확인하십시오. 매우 도움이 됩니다.

요소를 가운데에 배치할 새 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>

이렇게 하면 컨테이너가 크거나 작을 때마다 컨텐츠 디비가 중앙에 배치됩니다.이 경우 내용물이 중심이 되지 않도록 1100%의 컨테이너보다 커야 하지만, 이 경우 컨테이너로 만들 수 있습니다. 두 번째로 커지면 작동합니다.

할당text-align: center;부모님께.display: inline-block;디브까지

예를 들어, 나는 주요 내용 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;

.기사 {

}

기사 안에서 이미지 중심을 원합니다 */

.기사 img {

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

}

이제 동일한 기사 요소의 이 이미지 아래에 더 많은 내용을 읽을 수 있는 버튼이 있어야 합니다. 물론 응답성이 높은 디자인 안에 있을 때는 해당 버튼이나 %로 작업해야 합니다.*/

.버튼 {

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를 사용할 수 있습니다.저는 플렉스를 사용하는 것을 선호하고 요소에 정확한 크기를 사용하지 않습니다.

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

보시다시피 Outer divis Flex 컨테이너 및 Inner는 다음과 같이 지정된 Flex 항목이어야 합니다.flex: 1 1 auto;이 간단한 샘플을 볼 수 있다는 것을 더 잘 이해하기 위해.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>

요소의 중심을 맞추는 방법에는 여러 가지 방법이 있을 수 있습니다. 요소는 디스플레이 속성 또는 위치를 사용하거나 부동 또는 여백을 사용할 수 있습니다.하지만 일반적으로 플렉스박스가 쉽고 간단하기 때문에 사용하는 것을 선호합니다.사람마다 선호도가 다르다는 것을 알지만, 그것은 전적으로 개발자의 선호도와 요소의 관계에 달려 있습니다.

.parent{
  display: block;
 }
.sub-parent-1{
  display: flex;
  justify-content: center;  //horizontal centering
  align-items: center;  //vertical centering
}

<body>
  <div class="parent">
    <div class="sub-parent-1">
      <div class="child-1">...</div>
    </div>
    <div class="child-2">...</div>
    <div class="child-3">...</div>
    <div class="child-4">...</div>
    <div class="child-5">...</div>
  </div>
</body>

만약 그 대답들 중 아무 것도 맞지 않는다면 그것입니다.이거 드셔보세요.수평 및 수직으로 정렬된 하위 요소입니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div class="container">
            <div class="content">
                <img width="300px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Building92microsoft.jpg/800px-Building92microsoft.jpg" alt="microsoft" />
            </div>
        </div>
    </body>
    <style>
        .container {
            display: flex; /* can also use grid */
            background-color: #47472d;
            width: 500px;
            height: 400px;
            overflow: auto;
        }
        .content { margin: auto; }
    </style>
</html>

언급URL : https://stackoverflow.com/questions/6810031/css-center-element-within-a-div-element